/* C&M Coaching modernization layer (v1).
   Loaded after the theme bundle and css/custom.css.
   Goal: rounded corners, softer shadows, modern font, tighter focus rings.
   Brand colors preserved (#dd443c red, #1a1a1a dark surface).
*/

/* ---- Typography: modern system font stack ---- */
html,
body,
.btn,
.form-control,
input,
textarea,
select,
button {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    line-height: 1.55;
}

/* ---- Cards: rounder + softer layered shadow + more breathing room ---- */
.card {
    border-radius: 12px !important;
    border: 1px solid rgba(255, 255, 255, 0.04);
    -webkit-box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35), 0 1px 2px rgba(0, 0, 0, 0.25);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35), 0 1px 2px rgba(0, 0, 0, 0.25);
    overflow: hidden;
}
.card-body {
    padding: 1.75rem;
}
.card-header,
.card-footer {
    border-radius: 0;
}

/* ---- Buttons: softer corners + smoother transitions ---- */
.btn {
    border-radius: 8px;
    transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, transform 0.05s ease;
}
.btn:active {
    transform: translateY(1px);
}
/* Preserve circular icon buttons (e.g. the page-title download icon) */
.btn-circle,
.btn-icon.btn-circle {
    border-radius: 50% !important;
}

/* ---- Form controls: rounded edges, smooth focus, branded ring ---- */
.form-control,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="search"],
input[type="tel"],
input[type="url"],
input[type="date"],
input[type="datetime-local"],
input[type="time"],
input[type="month"],
select,
textarea {
    border-radius: 6px !important;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.form-control:focus,
input:focus,
select:focus,
textarea:focus {
    outline: none;
    border-color: #dd443c !important;
    box-shadow: 0 0 0 3px rgba(221, 68, 60, 0.22) !important;
}

/* ---- Modal: match card radius, softer chrome ---- */
.modal-content {
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.06);
}
.modal-header,
.modal-footer {
    border-color: rgba(255, 255, 255, 0.06);
}

/* ---- Dropdowns ---- */
.dropdown-menu {
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
}

/* ---- Alerts, badges ---- */
.alert {
    border-radius: 8px;
}
.badge {
    border-radius: 6px;
}

/* ---- Tables: subtle hover, softer dividers, breathier headers ---- */
.table tbody tr {
    transition: background-color 0.1s ease;
}
.table tbody tr:hover {
    background-color: rgba(221, 68, 60, 0.06) !important;
}
.table th,
.table td {
    border-top-color: rgba(255, 255, 255, 0.06) !important;
}
.table thead th {
    border-bottom: 2px solid rgba(221, 68, 60, 0.5);
    padding-top: 0.85rem;
    padding-bottom: 0.85rem;
    letter-spacing: 0.3px;
}

/* ---- Page title polish ---- */
.page-title-box .page-title {
    letter-spacing: 0.2px;
}

/* ---- Tooltip / popover corners ---- */
.tooltip-inner,
.popover {
    border-radius: 6px;
}

/* ---- Code/kbd ---- */
code,
kbd,
pre {
    border-radius: 4px;
}

/* ===========================================================
   Sidebar redesign
   Pill-style hover/active, branded accent, smoother spacing.
   Targets shared markup across all leftnav_<role>.php files.
   =========================================================== */

.left-side-menu {
    padding: 0 10px;
}

.left-side-menu .logo {
    padding: 16px 0;
    margin-bottom: 4px;
}

.side-nav .side-nav-item {
    margin-bottom: 2px;
}

.side-nav .side-nav-link {
    border-radius: 8px;
    padding: 10px 14px;
    display: flex;
    align-items: center;
    transition: background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
    position: relative;
}

.side-nav .side-nav-link:hover {
    background-color: rgba(255, 255, 255, 0.05);
    color: #ffffff !important;
}

.side-nav .side-nav-link.active,
.side-nav .side-nav-item.mm-active > .side-nav-link {
    background-color: rgba(221, 68, 60, 0.16);
    color: #ffffff !important;
    box-shadow: inset 3px 0 0 #dd443c;
}

/* Fixed-width icons so labels align cleanly */
.side-nav .side-nav-link > i {
    width: 22px;
    font-size: 1rem;
    text-align: center;
    margin-right: 12px;
    transition: color 0.15s ease;
}

.side-nav .side-nav-link.active > i,
.side-nav .side-nav-item.mm-active > .side-nav-link > i {
    color: #dd443c;
}

/* Submenu (.side-nav-second-level): tighter indent, hover state, branded active */
.side-nav-second-level {
    padding-left: 38px !important;
    padding-top: 4px !important;
    padding-bottom: 4px !important;
}

.side-nav-second-level li a {
    border-radius: 6px;
    padding: 6px 12px !important;
    color: rgb(164, 164, 164) !important;
    font-weight: 500 !important;
    font-size: 0.95rem !important;
    transition: background-color 0.15s ease, color 0.15s ease;
    display: block;
}

.side-nav-second-level li a:hover {
    background-color: rgba(255, 255, 255, 0.04);
    color: #ffffff !important;
}

.side-nav-second-level li.active > a,
.side-nav-second-level li.mm-active > a {
    color: #dd443c !important;
    background-color: rgba(221, 68, 60, 0.10);
    font-weight: 600 !important;
}

/* Menu arrow: smooth rotation when expanding */
.side-nav .menu-arrow {
    transition: transform 0.2s ease;
}

/* ===========================================================
   v2: brand palette, button color uniformity, semantic toggles
   =========================================================== */

:root {
    --brand-red:           #dd443c;
    --brand-red-dark:      #b8362f;
    --success-green:       #2da44e;
    --success-green-dark:  #248a40;
    --danger-deep:         #a02020;
    --danger-deep-dark:    #8a1717;
    --muted-gray:          #6c757d;
    --muted-gray-dark:     #5a6268;
    --warning-amber:       #d97706;
    --warning-amber-dark:  #b85f02;
}

/* ---- Filled button variants ---- */
.btn-primary,
.btn-primary:not(:disabled):not(.disabled):active,
.btn-primary:not(:disabled):not(.disabled).active {
    background-color: var(--brand-red) !important;
    border-color: var(--brand-red) !important;
    color: #fff !important;
}
.btn-primary:hover,
.btn-primary:focus {
    background-color: var(--brand-red-dark) !important;
    border-color: var(--brand-red-dark) !important;
    color: #fff !important;
}

.btn-secondary,
.btn-secondary:not(:disabled):not(.disabled):active,
.btn-secondary:not(:disabled):not(.disabled).active {
    background-color: var(--muted-gray) !important;
    border-color: var(--muted-gray) !important;
    color: #fff !important;
}
.btn-secondary:hover,
.btn-secondary:focus {
    background-color: var(--muted-gray-dark) !important;
    border-color: var(--muted-gray-dark) !important;
    color: #fff !important;
}

.btn-success,
.btn-success:not(:disabled):not(.disabled):active,
.btn-success:not(:disabled):not(.disabled).active {
    background-color: var(--success-green) !important;
    border-color: var(--success-green) !important;
    color: #fff !important;
}
.btn-success:hover,
.btn-success:focus {
    background-color: var(--success-green-dark) !important;
    border-color: var(--success-green-dark) !important;
    color: #fff !important;
}

.btn-danger,
.btn-danger:not(:disabled):not(.disabled):active,
.btn-danger:not(:disabled):not(.disabled).active {
    background-color: var(--danger-deep) !important;
    border-color: var(--danger-deep) !important;
    color: #fff !important;
}
.btn-danger:hover,
.btn-danger:focus {
    background-color: var(--danger-deep-dark) !important;
    border-color: var(--danger-deep-dark) !important;
    color: #fff !important;
}

.btn-warning,
.btn-warning:not(:disabled):not(.disabled):active,
.btn-warning:not(:disabled):not(.disabled).active {
    background-color: var(--warning-amber) !important;
    border-color: var(--warning-amber) !important;
    color: #fff !important;
}
.btn-warning:hover,
.btn-warning:focus {
    background-color: var(--warning-amber-dark) !important;
    border-color: var(--warning-amber-dark) !important;
    color: #fff !important;
}

/* btn-info maps to muted gray to retire the off-brand teal/purple */
.btn-info,
.btn-info:not(:disabled):not(.disabled):active,
.btn-info:not(:disabled):not(.disabled).active {
    background-color: var(--muted-gray) !important;
    border-color: var(--muted-gray) !important;
    color: #fff !important;
}
.btn-info:hover,
.btn-info:focus {
    background-color: var(--muted-gray-dark) !important;
    border-color: var(--muted-gray-dark) !important;
    color: #fff !important;
}

/* ---- Outline button variants ---- */
.btn-outline-primary {
    color: var(--brand-red) !important;
    border-color: var(--brand-red) !important;
    background-color: transparent !important;
}
.btn-outline-primary:hover,
.btn-outline-primary:focus {
    background-color: var(--brand-red) !important;
    color: #fff !important;
}

.btn-outline-secondary {
    color: var(--muted-gray) !important;
    border-color: var(--muted-gray) !important;
    background-color: transparent !important;
}
.btn-outline-secondary:hover,
.btn-outline-secondary:focus {
    background-color: var(--muted-gray) !important;
    color: #fff !important;
}

.btn-outline-success {
    color: var(--success-green) !important;
    border-color: var(--success-green) !important;
    background-color: transparent !important;
}
.btn-outline-success:hover,
.btn-outline-success:focus {
    background-color: var(--success-green) !important;
    color: #fff !important;
}

.btn-outline-danger {
    color: var(--danger-deep) !important;
    border-color: var(--danger-deep) !important;
    background-color: transparent !important;
}
.btn-outline-danger:hover,
.btn-outline-danger:focus {
    background-color: var(--danger-deep) !important;
    color: #fff !important;
}

/* ---- Branded focus ring on buttons (matches form controls in v1) ---- */
.btn:focus,
.btn.focus {
    box-shadow: 0 0 0 3px rgba(221, 68, 60, 0.22) !important;
}

/* ---- Toggle/switch: green when "on" (semantic active state) ---- */
input:checked + .slider {
    background-color: var(--success-green) !important;
}
input:focus + .slider {
    box-shadow: 0 0 1px var(--success-green) !important;
}

/* ---- Font enforcement: defeat per-page `font: bold 15px arial...` shortcuts ---- */
html, body, .btn, .form-control, input, textarea, select, button {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
}

/* ---- Anchor / link color: keep brand red for primary nav-style links ---- */
a {
    color: var(--brand-red);
}
a:hover {
    color: var(--brand-red-dark);
}

/* ---- DataTables / Bootstrap pagination: brand colors + rounded ----
   Beats the Hyper theme's #727cf5 active-state purple and the gray
   .page-link defaults. Applies to every page that uses DataTables
   pagination, including those using only the demo init (inbound.php,
   outbound.php, collections.php, etc.). */
.pagination .page-link {
    color: var(--brand-red) !important;
    background-color: transparent !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 6px !important;
    margin: 0 2px !important;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.pagination .page-link:hover {
    color: var(--brand-red) !important;
    background-color: rgba(221, 68, 60, 0.12) !important;
    border-color: var(--brand-red) !important;
}
.pagination .page-link:focus {
    box-shadow: 0 0 0 3px rgba(221, 68, 60, 0.22) !important;
    outline: none !important;
}
.pagination .page-item.active .page-link {
    color: #fff !important;
    background-color: var(--brand-red) !important;
    border-color: var(--brand-red) !important;
}
.pagination .page-item.disabled .page-link {
    color: rgba(255, 255, 255, 0.3) !important;
    background-color: transparent !important;
    border-color: rgba(255, 255, 255, 0.05) !important;
}
/* Override the theme's first/last-child specific corner radii so every
   item is uniformly rounded (the theme keeps the inner corners square). */
.pagination .page-item:first-child .page-link,
.pagination .page-item:last-child .page-link {
    border-radius: 6px !important;
}
/* Pagination-rounded variant (used by some pages via drawCallback): keep
   a fully-rounded pill shape but with our brand colors. */
.pagination-rounded .page-link {
    border-radius: 30px !important;
}

/* ---- text-* color utilities mapped to brand palette ----
   The Hyper theme sets .text-danger = #fa5c7c (pinkish), .text-primary
   = #727cf5 (purple), etc. These are widely used as section header
   accents in dashboard pages and were never on-brand. */
.text-primary { color: var(--brand-red) !important; }
.text-danger  { color: var(--brand-red) !important; }
.text-success { color: var(--success-green) !important; }
.text-warning { color: var(--warning-amber) !important; }
.text-info    { color: var(--muted-gray) !important; }

a.text-primary:hover, a.text-primary:focus { color: var(--brand-red-dark) !important; }
a.text-danger:hover,  a.text-danger:focus  { color: var(--brand-red-dark) !important; }
a.text-success:hover, a.text-success:focus { color: var(--success-green-dark) !important; }
a.text-warning:hover, a.text-warning:focus { color: var(--warning-amber-dark) !important; }
a.text-info:hover,    a.text-info:focus    { color: var(--muted-gray-dark) !important; }

/* ---- .form-submit-button: bring the duplicated navy "Next" / "Submit"
   button on-brand. Class is defined as inline <style> in 30+ pages with
   navy #0033A2 background + outset border + bold 15px arial. We beat
   those page-level rules with !important and let the button size
   naturally instead of locking width:100px / height:50px. */
input.form-submit-button,
button.form-submit-button,
.form-submit-button {
    background: var(--brand-red) !important;
    background-color: var(--brand-red) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 8px !important;
    padding: 10px 24px !important;
    height: auto !important;
    width: auto !important;
    min-width: 90px;
    font: 500 14px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
    text-shadow: none !important;
    cursor: pointer;
    transition: background-color 0.15s ease, box-shadow 0.15s ease, transform 0.05s ease;
}
.form-submit-button:hover,
.form-submit-button:focus {
    background: var(--brand-red-dark) !important;
    background-color: var(--brand-red-dark) !important;
    color: #fff !important;
    outline: none;
    box-shadow: 0 0 0 3px rgba(221, 68, 60, 0.22) !important;
}
.form-submit-button:active {
    transform: translateY(1px);
}

/* ---- Puller dashboard ----
   Stats hero + sectioned pull-a-call form + pending-calls table. Same
   visual language as the rest of the modernized pages: subtle dark
   surfaces, brand-red accents, friendly section subheadings. */

/* Hero with three quick stats */
.cg-puller-hero {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-bottom: 22px;
}
.cg-puller-stat {
    background: linear-gradient(135deg, rgba(255,255,255,0.04), rgba(255,255,255,0.015));
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 12px;
    padding: 16px 20px;
    display: flex;
    align-items: center;
    gap: 14px;
    transition: transform 0.15s ease, border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
    /* Tiles are anchors — reset native styles */
    color: inherit;
    text-decoration: none;
    cursor: pointer;
}
.cg-puller-stat:hover,
.cg-puller-stat:focus {
    transform: translateY(-2px);
    border-color: rgba(255, 255, 255, 0.14);
    background: linear-gradient(135deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
    color: inherit;
    text-decoration: none;
    outline: none;
}

/* Active filter state — colored border + glow matching the tile's icon */
.cg-puller-stat-active {
    transform: translateY(-1px);
}
.cg-puller-stat-active:has(.stat-today),
.cg-puller-stat-active.stat-today-active {
    border-color: rgba(221, 68, 60, 0.6);
    box-shadow: 0 0 0 1px rgba(221, 68, 60, 0.45), 0 8px 22px rgba(221, 68, 60, 0.18);
}
.cg-puller-stat-active:has(.stat-week) {
    border-color: rgba(45, 164, 78, 0.6);
    box-shadow: 0 0 0 1px rgba(45, 164, 78, 0.45), 0 8px 22px rgba(45, 164, 78, 0.18);
}
.cg-puller-stat-active:has(.stat-queue) {
    border-color: rgba(245, 166, 35, 0.6);
    box-shadow: 0 0 0 1px rgba(245, 166, 35, 0.45), 0 8px 22px rgba(245, 166, 70, 0.18);
}
.cg-puller-stat-active:has(.stat-uncoachable) {
    border-color: rgba(180, 180, 200, 0.5);
    box-shadow: 0 0 0 1px rgba(180, 180, 200, 0.35), 0 8px 22px rgba(180, 180, 200, 0.12);
}
/* Fallback for browsers without :has() — give all active tiles a
   neutral white outline */
@supports not (selector(:has(*))) {
    .cg-puller-stat-active {
        border-color: rgba(255, 255, 255, 0.4);
        box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.25);
    }
}

/* "Clear filter" pill next to the section title when a filter is active */
.cg-puller-clear-filter {
    background: none;
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.78);
    border-radius: 999px;
    padding: 4px 12px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    text-decoration: none;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.cg-puller-clear-filter:hover,
.cg-puller-clear-filter:focus {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.22);
    color: #fff;
    outline: none;
    text-decoration: none;
}
.cg-puller-clear-filter i { font-size: 14px; }
.cg-puller-stat-icon {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    flex-shrink: 0;
}
.cg-puller-stat-icon.stat-today {
    background: rgba(221, 68, 60, 0.14);
    color: var(--brand-red, #dd443c);
}
.cg-puller-stat-icon.stat-week {
    background: rgba(45, 164, 78, 0.16);
    color: var(--success-green, #2da44e);
}
.cg-puller-stat-icon.stat-queue {
    background: rgba(245, 166, 35, 0.16);
    color: var(--warning-amber, #f5a623);
}
.cg-puller-stat-icon.stat-uncoachable {
    background: rgba(150, 150, 165, 0.16);
    color: rgba(200, 200, 215, 0.95);
}
.cg-puller-stat-num {
    color: #fff;
    font-size: 28px;
    font-weight: 700;
    line-height: 1;
    margin-right: 6px;
}
.cg-puller-stat-label {
    color: rgba(255, 255, 255, 0.6);
    font-size: 13px;
    font-weight: 500;
}

/* Section wrapper — labeled chunk of the form */
.cg-puller-section {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    padding: 16px 20px 18px;
    margin-bottom: 14px;
}
.cg-puller-section-head {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}
.cg-puller-section-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--brand-red, #dd443c);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    flex-shrink: 0;
}
.cg-puller-section-title {
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.6px;
}
.cg-puller-section-help {
    color: rgba(255, 255, 255, 0.5);
    font-size: 12px;
    font-style: italic;
}

/* Section head variant with right-aligned controls (coach picker +
   clear-filter pill on the awaiting/uncoachable table). */
.cg-puller-section-head-with-controls {
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}
.cg-puller-section-head-text {
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
    min-width: 0;
}
.cg-puller-section-head-controls {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
    flex-wrap: wrap;
}

.cg-puller-coach-filter {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    padding: 4px 10px 4px 12px;
    margin: 0;
}
.cg-puller-coach-filter-label {
    color: rgba(255, 255, 255, 0.5);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.6px;
}
.cg-puller-coach-filter select {
    background: transparent;
    border: 0;
    color: #fff;
    font-size: 13px;
    padding: 4px 6px;
    min-width: 160px;
    appearance: auto;
}
.cg-puller-coach-filter select:focus {
    outline: none;
    box-shadow: 0 0 0 2px rgba(221, 68, 60, 0.35);
    border-radius: 4px;
}

/* ---- Coach dashboard: uncoachable recovery card ----
   Collapsible card that lives below "Calls To Coach" so coaches can
   recover accidentally-uncoachable rows (last 30 days, up to 10).
   Auto-hidden when there's nothing to recover. */

.cg-coach-recovery {
    margin: 0 auto 24px;
    max-width: 100%;
    border: 1px solid rgba(150, 150, 165, 0.2);
    border-radius: 10px;
    background: rgba(150, 150, 165, 0.04);
    overflow: hidden;
}

.cg-coach-recovery-header {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 12px 18px;
    background: transparent;
    border: 0;
    color: rgba(255, 255, 255, 0.85);
    text-align: left;
    cursor: pointer;
    gap: 10px;
    transition: background-color 0.15s ease;
}
.cg-coach-recovery-header:hover,
.cg-coach-recovery-header:focus {
    background: rgba(255, 255, 255, 0.04);
    outline: none;
}
.cg-coach-recovery-header[aria-expanded="true"] {
    border-bottom: 1px solid rgba(150, 150, 165, 0.18);
}
.cg-coach-recovery-icon {
    color: rgba(200, 200, 215, 0.85);
    font-size: 20px;
    flex-shrink: 0;
}
.cg-coach-recovery-title {
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.6px;
}
.cg-coach-recovery-count {
    background: rgba(150, 150, 165, 0.18);
    color: rgba(220, 220, 235, 0.95);
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
}
.cg-coach-recovery-help-inline {
    color: rgba(255, 255, 255, 0.5);
    font-size: 12px;
    font-style: italic;
    flex: 1;
    min-width: 0;
}
.cg-coach-recovery-chevron {
    color: rgba(255, 255, 255, 0.55);
    font-size: 22px;
    transition: transform 0.18s ease;
    flex-shrink: 0;
}
.cg-coach-recovery-header[aria-expanded="true"] .cg-coach-recovery-chevron {
    transform: rotate(180deg);
}

.cg-coach-recovery-body {
    padding: 14px 18px 18px;
}
.cg-coach-recovery-help {
    color: rgba(255, 255, 255, 0.6);
    font-size: 13px;
    margin-bottom: 12px;
}
.cg-coach-recovery-help strong { color: #fff; }

.cg-coach-recovery-table {
    width: 100%;
    color: rgba(255, 255, 255, 0.88);
    font-size: 13px;
    border-collapse: collapse;
}
.cg-coach-recovery-table thead th {
    color: rgba(255, 255, 255, 0.5);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    font-weight: 500;
    text-align: left;
    padding: 6px 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.cg-coach-recovery-table tbody td {
    padding: 8px 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    vertical-align: middle;
}
.cg-coach-recovery-table tbody tr:last-child td {
    border-bottom: 0;
}
.cg-coach-recovery-table tbody tr:hover td {
    background: rgba(255, 255, 255, 0.025);
}
.cg-coach-recovery-comments {
    color: rgba(255, 255, 255, 0.6);
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cg-coach-recovery-restore {
    background: rgba(45, 164, 78, 0.12);
    color: var(--success-green, #2da44e);
    border: 1px solid rgba(45, 164, 78, 0.3);
    border-radius: 999px;
    padding: 4px 12px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: background-color 0.15s ease, color 0.15s ease, transform 0.1s ease;
    white-space: nowrap;
}
.cg-coach-recovery-restore:hover {
    background: var(--success-green, #2da44e);
    color: #fff;
    transform: translateY(-1px);
}
.cg-coach-recovery-restore:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}
.cg-coach-recovery-restore i { font-size: 14px; }

.cg-coach-recovery-empty {
    color: var(--success-green, #2da44e);
    font-size: 13px;
    text-align: center;
    padding: 20px;
}
.cg-coach-recovery-empty i {
    font-size: 18px;
    margin-right: 4px;
}

/* ---- View-as modal (topbar avatar menu) ----
   Live-search the active user list and click a row to impersonate
   that account. Skips the trip to people.php for internal staff. */
.cg-viewas-modal .modal-content {
    background: #1a1a1a;
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.92);
}
.cg-viewas-modal .modal-header,
.cg-viewas-modal .modal-footer {
    border-color: rgba(255, 255, 255, 0.06);
}
.cg-viewas-modal .modal-title { color: #fff; }
.cg-viewas-modal .modal-title i {
    color: var(--brand-red, #dd443c);
}
.cg-viewas-modal .close { color: rgba(255, 255, 255, 0.7); text-shadow: none; opacity: 1; }
.cg-viewas-modal .close:hover { color: #fff; }

.cg-viewas-search {
    margin-bottom: 12px;
}

.cg-viewas-results {
    max-height: 380px;
    overflow-y: auto;
}

.cg-viewas-hint {
    color: rgba(255, 255, 255, 0.45);
    font-size: 13px;
    text-align: center;
    padding: 24px 12px;
    font-style: italic;
}
.cg-viewas-hint-error { color: var(--warning-amber, #f5a623); }

.cg-viewas-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.cg-viewas-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 14px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 8px;
    margin-bottom: 6px;
    cursor: pointer;
    transition: background-color 0.12s ease, border-color 0.12s ease, transform 0.05s ease;
}
.cg-viewas-item:hover,
.cg-viewas-item:focus {
    background: rgba(221, 68, 60, 0.08);
    border-color: rgba(221, 68, 60, 0.4);
    transform: translateX(2px);
}
.cg-viewas-item-main {
    flex: 1;
    min-width: 0;
}
.cg-viewas-item-name {
    color: #fff;
    font-weight: 600;
    font-size: 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.cg-viewas-item-meta {
    color: rgba(255, 255, 255, 0.55);
    font-size: 12px;
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.cg-viewas-item-arrow {
    color: var(--brand-red, #dd443c);
    font-size: 22px;
    flex-shrink: 0;
    opacity: 0;
    transition: opacity 0.12s ease, transform 0.12s ease;
}
.cg-viewas-item:hover .cg-viewas-item-arrow {
    opacity: 1;
    transform: translateX(2px);
}
.cg-viewas-item-loading {
    opacity: 0.55;
    pointer-events: none;
}

/* ---- Support modal (topbar avatar menu) ----
   Coach contact info + a quick-message form. Replaces the old
   static "Support" link to the company website. */
.cg-support-modal .modal-content {
    background: #1a1a1a;
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.92);
}
.cg-support-modal .modal-header,
.cg-support-modal .modal-footer {
    border-color: rgba(255, 255, 255, 0.06);
}
.cg-support-modal .modal-title { color: #fff; }
.cg-support-modal .modal-title i { color: var(--brand-red, #dd443c); }
.cg-support-modal .close { color: rgba(255, 255, 255, 0.7); text-shadow: none; opacity: 1; }
.cg-support-modal .close:hover { color: #fff; }

.cg-support-hint {
    color: rgba(255, 255, 255, 0.5);
    font-size: 13px;
    text-align: center;
    padding: 24px 12px;
    font-style: italic;
}
.cg-support-hint-error { color: var(--warning-amber, #f5a623); }

.cg-support-fallback {
    color: rgba(255, 255, 255, 0.78);
    font-size: 14px;
    text-align: center;
    padding: 8px 0;
}
.cg-support-fallback a {
    color: var(--brand-red, #dd443c);
    font-weight: 500;
}
.cg-support-fallback a:hover { color: var(--brand-red-dark, #b8362f); text-decoration: underline; }

.cg-support-coaches {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 4px;
}
.cg-support-coach {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 10px;
    padding: 12px 14px;
}
.cg-support-coach-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 8px;
}
.cg-support-coach-name {
    color: #fff;
    font-size: 16px;
    font-weight: 600;
}
.cg-support-coach-label {
    color: rgba(255, 255, 255, 0.45);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.6px;
}
.cg-support-coach-contacts {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.cg-support-contact-row {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: rgba(255, 255, 255, 0.85);
    font-size: 14px;
    padding: 6px 0;
    text-decoration: none;
    transition: color 0.12s ease;
}
.cg-support-contact-row:hover {
    color: var(--brand-red, #dd443c);
    text-decoration: none;
}
.cg-support-contact-row i {
    color: rgba(255, 255, 255, 0.5);
    font-size: 18px;
    flex-shrink: 0;
}
.cg-support-contact-row:hover i { color: var(--brand-red, #dd443c); }
.cg-support-contact-meta {
    color: rgba(255, 255, 255, 0.4);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-left: 4px;
}

.cg-support-divider {
    border-color: rgba(255, 255, 255, 0.06);
    margin: 18px 0 14px;
}
.cg-support-message {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.cg-support-message-label {
    color: rgba(255, 255, 255, 0.65);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    margin: 0;
}
.cg-support-pick-coach {
    color: rgba(255, 255, 255, 0.55);
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.cg-support-pick-coach select { max-width: 220px; }

.cg-support-actions {
    display: flex;
    justify-content: flex-end;
}

.cg-support-status {
    font-size: 13px;
    text-align: right;
    min-height: 18px;
}
.cg-support-status-error { color: var(--warning-amber, #f5a623); }
.cg-support-status-success {
    color: var(--success-green, #2da44e);
    text-align: left;
    background: rgba(45, 164, 78, 0.08);
    border: 1px solid rgba(45, 164, 78, 0.25);
    border-radius: 8px;
    padding: 8px 12px;
}
.cg-support-status-success i { margin-right: 4px; }

/* ---- Coach dashboard: hero, scope, sessions table ----
   Stats hero at the top of the coach dashboard, "my dealerships /
   all" scope toggle, and a unified sessions table that replaces the
   eight previously-stacked call-type sections. */

.cg-coach-hero {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 12px;
    margin-bottom: 16px;
}
.cg-coach-stat {
    background: linear-gradient(135deg, rgba(255,255,255,0.04), rgba(255,255,255,0.015));
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 12px;
    padding: 16px 20px;
    display: flex;
    align-items: center;
    gap: 14px;
    transition: transform 0.15s ease, border-color 0.15s ease;
}
.cg-coach-stat {
    /* Tiles are anchors — reset native styles */
    color: inherit;
    text-decoration: none;
    cursor: pointer;
}
.cg-coach-stat:hover,
.cg-coach-stat:focus {
    transform: translateY(-2px);
    border-color: rgba(255, 255, 255, 0.14);
    background: linear-gradient(135deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
    color: inherit;
    text-decoration: none;
    outline: none;
}

/* "Past Due" gets a perpetually-stronger frame so it pulls the eye
   away from the rest of the hero whenever there's a non-zero count. */
.cg-coach-stat-urgent {
    border-color: rgba(220, 50, 50, 0.45);
    background: linear-gradient(135deg, rgba(220, 50, 50, 0.08), rgba(220, 50, 50, 0.02));
}
.cg-coach-stat-urgent.cg-coach-stat-alarm {
    border-color: rgba(220, 50, 50, 0.7);
    background: linear-gradient(135deg, rgba(220, 50, 50, 0.14), rgba(220, 50, 50, 0.04));
    box-shadow: 0 0 0 1px rgba(220, 50, 50, 0.45), 0 6px 24px rgba(220, 50, 50, 0.18);
}
.cg-coach-stat-urgent.cg-coach-stat-alarm .cg-coach-stat-num {
    color: #ff6058;
    animation: cgCoachPulse 2.4s ease-in-out infinite;
}
@keyframes cgCoachPulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.65; }
}

/* Active tile — colored border + glow matching the icon's color */
.cg-coach-stat-active { transform: translateY(-1px); }
.cg-coach-stat-active:has(.stat-pastdue) {
    border-color: rgba(220, 50, 50, 0.85);
    box-shadow: 0 0 0 1px rgba(220, 50, 50, 0.6), 0 8px 22px rgba(220, 50, 50, 0.28);
    background: linear-gradient(135deg, rgba(220, 50, 50, 0.18), rgba(220, 50, 50, 0.06));
}
.cg-coach-stat-active:has(.stat-today) {
    border-color: rgba(56, 189, 248, 0.6);
    box-shadow: 0 0 0 1px rgba(56, 189, 248, 0.45), 0 8px 22px rgba(56, 189, 248, 0.18);
}
.cg-coach-stat-active:has(.stat-week) {
    border-color: rgba(45, 164, 78, 0.6);
    box-shadow: 0 0 0 1px rgba(45, 164, 78, 0.45), 0 8px 22px rgba(45, 164, 78, 0.18);
}
.cg-coach-stat-active:has(.stat-review) {
    border-color: rgba(245, 166, 35, 0.6);
    box-shadow: 0 0 0 1px rgba(245, 166, 35, 0.45), 0 8px 22px rgba(245, 166, 70, 0.18);
}
.cg-coach-stat-active:has(.stat-mystery) {
    border-color: rgba(180, 110, 220, 0.5);
    box-shadow: 0 0 0 1px rgba(180, 110, 220, 0.4), 0 8px 22px rgba(180, 110, 220, 0.18);
}
@supports not (selector(:has(*))) {
    .cg-coach-stat-active {
        border-color: rgba(255, 255, 255, 0.4);
        box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.25);
    }
}
.cg-coach-stat-icon {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    flex-shrink: 0;
}
.cg-coach-stat-icon.stat-pastdue {
    background: rgba(200, 30, 30, 0.22);
    color: #ff6058;
}
.cg-coach-stat-icon.stat-today {
    background: rgba(56, 189, 248, 0.15);
    color: #38bdf8;
}
.cg-coach-stat-icon.stat-week {
    background: rgba(45, 164, 78, 0.16);
    color: var(--success-green, #2da44e);
}
.cg-coach-stat-icon.stat-review {
    background: rgba(245, 166, 35, 0.16);
    color: var(--warning-amber, #f5a623);
}
.cg-coach-stat-icon.stat-mystery {
    background: rgba(150, 150, 165, 0.16);
    color: rgba(200, 200, 215, 0.95);
}
.cg-coach-stat-num {
    color: #fff;
    font-size: 28px;
    font-weight: 700;
    line-height: 1;
    margin-right: 6px;
}
.cg-coach-stat-label {
    color: rgba(255, 255, 255, 0.6);
    font-size: 13px;
    font-weight: 500;
}

/* Scope toggle — sits between the hero and the cards below */
.cg-coach-scope {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 18px;
    padding: 0 4px;
}
.cg-coach-scope-label {
    color: rgba(255, 255, 255, 0.5);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    margin-right: 4px;
}
.cg-coach-scope-btn {
    color: rgba(255, 255, 255, 0.65);
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    padding: 4px 14px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.15s ease;
}
.cg-coach-scope-btn:hover,
.cg-coach-scope-btn:focus {
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    text-decoration: none;
}
.cg-coach-scope-active {
    background: rgba(221, 68, 60, 0.12) !important;
    color: #fff !important;
    border-color: rgba(221, 68, 60, 0.5) !important;
}
.cg-coach-scope-help {
    color: rgba(245, 166, 35, 0.85);
    font-size: 12px;
    font-style: italic;
    margin-left: 6px;
}

/* Recent sessions card — chips header + DataTable */
.cg-coach-sessions-card {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    padding: 18px 20px 14px;
    margin: 24px 0;
}
.cg-coach-sessions-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 14px;
    margin-bottom: 14px;
}
.cg-coach-sessions-head-text {
    min-width: 0;
}
.cg-coach-sessions-title {
    color: #fff;
    margin: 0;
    font-size: 18px;
    font-weight: 600;
}
.cg-coach-sessions-meta {
    color: rgba(255, 255, 255, 0.55);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    display: block;
    margin-top: 2px;
}

.cg-coach-sessions-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.cg-coach-chip {
    background: rgba(255, 255, 255, 0.04);
    color: rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 999px;
    padding: 5px 14px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
}
.cg-coach-chip:hover,
.cg-coach-chip:focus {
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    outline: none;
}
.cg-coach-chip-active {
    background: var(--brand-red, #dd443c) !important;
    color: #fff !important;
    border-color: var(--brand-red, #dd443c) !important;
}

.cg-coach-sessions-empty {
    color: rgba(255, 255, 255, 0.55);
    font-size: 14px;
    text-align: center;
    padding: 32px 16px;
    font-style: italic;
}
.cg-coach-sessions-empty a {
    color: var(--brand-red, #dd443c);
    margin-left: 4px;
    font-style: normal;
    font-weight: 500;
}
.cg-coach-sessions-empty a:hover { color: var(--brand-red-dark, #b8362f); }

/* Type tags — small colored labels per call type, distinct from chips */
.cg-coach-type-tag {
    display: inline-block;
    padding: 2px 9px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.08);
}
.cg-coach-type-inbound      { background: rgba(45, 164, 78, 0.14);  color: #5cd478; border-color: rgba(45,164,78,0.3); }
.cg-coach-type-outbound     { background: rgba(45, 145, 222, 0.14); color: #6ab9f1; border-color: rgba(45,145,222,0.3); }
.cg-coach-type-mystery      { background: rgba(180, 110, 220, 0.14); color: #c699e0; border-color: rgba(180,110,220,0.3); }
.cg-coach-type-service      { background: rgba(245, 166, 35, 0.14); color: #f5c068; border-color: rgba(245,166,35,0.3); }
.cg-coach-type-collections  { background: rgba(221, 68, 60, 0.14);  color: #f08a82; border-color: rgba(221,68,60,0.3); }
.cg-coach-type-1on1         { background: rgba(94, 188, 188, 0.14); color: #88d4d4; border-color: rgba(94,188,188,0.3); }
.cg-coach-type-receptionist { background: rgba(220, 180, 100, 0.14); color: #e0c68e; border-color: rgba(220,180,100,0.3); }

/* Status pills */
.cg-coach-status {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.3px;
}
.cg-coach-status-accepted {
    background: rgba(45, 164, 78, 0.16);
    color: var(--success-green, #2da44e);
    border: 1px solid rgba(45, 164, 78, 0.32);
}
.cg-coach-status-missing {
    background: rgba(255, 112, 126, 0.14);
    color: #ff8090;
    border: 1px solid rgba(255, 112, 126, 0.32);
}

.cg-coach-view-link {
    color: var(--brand-red, #dd443c);
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
}
.cg-coach-view-link:hover { color: var(--brand-red-dark, #b8362f); text-decoration: underline; }

/* Filter banner inside the Calls To Coach card when past_due / today /
   week is active. The wrapper row puts it on its own line centered
   beneath the section title; the inner pill is inline-flex so the
   banner-text + Clear-filter pill sit side-by-side. */
.cg-coach-filter-banner-row {
    display: block;
    text-align: center;
    margin: 14px 0 4px;
}
.cg-coach-filter-banner {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 6px 14px;
    background: rgba(221, 68, 60, 0.10);
    border: 1px solid rgba(221, 68, 60, 0.28);
    border-radius: 999px;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.88);
}
.cg-coach-filter-banner-text strong {
    color: var(--brand-red, #dd443c);
    font-weight: 600;
}

/* Stronger styling when the past_due filter is active — bold red */
.cg-coach-filter-banner-urgent {
    background: rgba(220, 50, 50, 0.18);
    border-color: rgba(220, 50, 50, 0.5);
    color: #fff;
}
.cg-coach-filter-banner-urgent i.mdi-alert-octagon {
    color: #ff6058;
    font-size: 16px;
    margin-right: 4px;
}
.cg-coach-filter-banner-urgent .cg-coach-filter-banner-text strong {
    color: #ff6058;
}
.cg-coach-filter-clear {
    color: rgba(255, 255, 255, 0.7);
    font-size: 12px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.cg-coach-filter-clear:hover { color: #fff; text-decoration: none; }
.cg-coach-filter-clear i { font-size: 14px; }

/* Status filter pill in the Recent Sessions header (when review/
   mystery tile is active). Click to clear. */
.cg-coach-status-clear {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
    padding: 3px 12px;
    background: rgba(245, 166, 35, 0.12);
    color: var(--warning-amber, #f5a623);
    border: 1px solid rgba(245, 166, 35, 0.32);
    border-radius: 999px;
    font-size: 12px;
    font-weight: 500;
    text-decoration: none;
    transition: background-color 0.15s ease, color 0.15s ease;
}
.cg-coach-status-clear:hover {
    background: rgba(245, 166, 35, 0.22);
    color: #fff;
    text-decoration: none;
}
.cg-coach-status-clear i { font-size: 14px; }

@media (max-width: 1300px) {
    .cg-coach-hero { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 900px) {
    .cg-coach-hero { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
    .cg-coach-hero { grid-template-columns: 1fr; }
    .cg-coach-sessions-head { flex-direction: column; }
}

/* Step-1 row: rooftop + person side by side */
.cg-puller-row {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}
.cg-puller-row select { min-width: 220px; }

/* Coach picker (top of page) */
.cg-puller-coach-select {
    min-width: 260px;
}

/* Step-2 grid: tracking creds */
.cg-puller-tracking-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px 18px;
}
.cg-puller-tracking-row {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}
.cg-puller-tracking-row-wide {
    grid-column: 1 / -1;
}
.cg-puller-tracking-label {
    color: rgba(255, 255, 255, 0.5);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    margin: 0;
}
.cg-puller-tracking-link {
    color: var(--brand-red, #dd443c);
    font-size: 14px;
    font-weight: 500;
    align-self: flex-start;
}
.cg-puller-tracking-link:hover {
    color: var(--brand-red-dark, #b8362f);
    text-decoration: underline;
}
.cg-puller-readonly {
    background-color: rgba(255, 255, 255, 0.04) !important;
    color: rgba(255, 255, 255, 0.78) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    cursor: not-allowed;
}

/* Steps 3 + 4: field rows */
.cg-puller-fields-row {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px 16px;
    align-items: end;
}
.cg-puller-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}
.cg-puller-field-grow {
    grid-column: span 2;
}
.cg-puller-field label {
    color: rgba(255, 255, 255, 0.55);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    margin: 0;
}
.cg-puller-field input,
.cg-puller-field select,
.cg-puller-field textarea {
    width: 100%;
}
.cg-puller-submit-row {
    margin-top: 16px;
    text-align: right;
}

@media (max-width: 1100px) {
    .cg-puller-hero { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
    .cg-puller-hero { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
    .cg-puller-tracking-grid { grid-template-columns: 1fr; }
    .cg-puller-fields-row { grid-template-columns: repeat(2, 1fr); }
    .cg-puller-field-grow { grid-column: span 2; }
}

/* ---- People + companies dropdowns: hold a sensible width even when
   empty. The <select id="people"> across inbound/outbound/service/
   collections/oneonone/mystery/receptionist/translations/parts/
   monthly-performance-video has zero <option> children until a company
   is chosen in its sibling select. Same applies to #companies on the
   puller dashboard, which loads asynchronously after a coach is picked.
   Browsers size empty selects to a tiny ~20px box; min-width keeps them
   visually consistent. */
#people,
.dashboard-puller #companies {
    min-width: 220px;
}

/* ---- Avatar menu (topbar) + impersonation UI ----
   Replaces the legacy .nav-user box (name + role text + caret) with a
   single 38px circular avatar button. Real photos when uploaded, initials
   on a brand-tinted disc otherwise. The dropdown opens with a richer
   header (avatar + name + role) and the impersonation switch-back is a
   single, obvious action instead of a second user menu. */

.nav-user-modern {
    background-color: transparent !important;
    border: 0 !important;
    padding: 16px 12px !important;
    min-height: 70px;
    display: inline-flex;
    align-items: center;
    line-height: 1;
}
.nav-user-modern:hover,
.nav-user-modern:focus {
    background-color: rgba(255, 255, 255, 0.04) !important;
}

.cg-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: linear-gradient(135deg, #dd443c 0%, #b8362f 100%);
    color: #fff;
    overflow: hidden;
    border: 2px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
    flex-shrink: 0;
    transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease;
}
.nav-user-modern:hover .cg-avatar {
    transform: translateY(-1px);
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.45);
    border-color: rgba(255, 255, 255, 0.22);
}
.cg-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.cg-avatar-initials {
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.3px;
    color: #fff;
    line-height: 1;
}
.cg-avatar-lg {
    width: 56px;
    height: 56px;
    border-width: 3px;
}
.cg-avatar-lg .cg-avatar-initials {
    font-size: 20px;
}

/* Impersonation: amber ring on the avatar button itself */
.cg-avatar-impersonating {
    border-color: var(--warning-amber, #f5a623);
    box-shadow: 0 0 0 2px rgba(245, 166, 35, 0.25), 0 1px 2px rgba(0, 0, 0, 0.35);
}

/* Modern dropdown panel under the avatar */
.cg-profile-dropdown {
    width: 280px !important;
    padding: 0 !important;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px !important;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4), 0 2px 6px rgba(0, 0, 0, 0.25);
}
.cg-profile-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 16px 14px;
    background: rgba(255, 255, 255, 0.03);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.cg-profile-meta {
    min-width: 0;
}
.cg-profile-name {
    font-weight: 600;
    color: #fff;
    font-size: 14px;
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.cg-profile-role {
    color: rgba(255, 255, 255, 0.55);
    font-size: 12px;
    text-transform: capitalize;
    margin-top: 2px;
}
.cg-profile-dropdown .dropdown-item {
    padding: 10px 16px !important;
    font-size: 14px;
}
.cg-profile-dropdown .dropdown-divider {
    margin: 4px 0;
    border-top-color: rgba(255, 255, 255, 0.06);
}

/* Switch-back row inside the dropdown when impersonating */
.cg-impersonation-note {
    padding: 10px 16px;
    background: rgba(245, 166, 35, 0.08);
    border-bottom: 1px solid rgba(245, 166, 35, 0.18);
    color: rgba(255, 255, 255, 0.85);
    font-size: 13px;
    line-height: 1.4;
}
.cg-impersonation-note i {
    color: var(--warning-amber, #f5a623);
    margin-right: 4px;
}
.cg-impersonation-note a {
    color: var(--brand-red);
    font-weight: 500;
    text-decoration: none;
    display: inline;
}
.cg-impersonation-note a:hover {
    color: var(--brand-red-dark);
    text-decoration: underline;
}

/* Page-top banner so the impersonation state is obvious without
   needing to open the dropdown */
.cg-impersonation-banner {
    background: linear-gradient(90deg, rgba(245, 166, 35, 0.18), rgba(245, 166, 35, 0.08));
    border-bottom: 1px solid rgba(245, 166, 35, 0.35);
    color: rgba(255, 255, 255, 0.92);
    padding: 8px 18px;
    font-size: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}
.cg-impersonation-banner i {
    color: var(--warning-amber, #f5a623);
    font-size: 16px;
}
.cg-impersonation-banner-sep {
    color: rgba(255, 255, 255, 0.4);
    margin: 0 4px;
}
.cg-impersonation-banner a {
    color: #fff;
    text-decoration: underline;
    font-weight: 500;
}
.cg-impersonation-banner a:hover {
    color: #fff;
    text-decoration: none;
    opacity: 0.9;
}

/* My Account page avatar preview */
.myaccount-avatar-preview {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    background: linear-gradient(135deg, #dd443c 0%, #b8362f 100%);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border: 3px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
    flex-shrink: 0;
}
.myaccount-avatar-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.myaccount-avatar-initials {
    font-size: 36px;
    font-weight: 600;
    letter-spacing: 1px;
}

/* iOS-style toggle switch, brand-red when on */
.cg-switch {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
    flex-shrink: 0;
    vertical-align: middle;
}
.cg-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}
.cg-switch-slider {
    position: absolute;
    cursor: pointer;
    inset: 0;
    background-color: rgba(255, 255, 255, 0.18);
    border-radius: 24px;
    transition: background-color 0.18s ease;
}
.cg-switch-slider::before {
    content: "";
    position: absolute;
    height: 18px;
    width: 18px;
    left: 3px;
    top: 3px;
    background-color: #fff;
    border-radius: 50%;
    transition: transform 0.18s ease;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}
.cg-switch input:checked + .cg-switch-slider {
    background-color: var(--brand-red);
}
.cg-switch input:focus-visible + .cg-switch-slider {
    box-shadow: 0 0 0 3px rgba(221, 68, 60, 0.25);
}
.cg-switch input:checked + .cg-switch-slider::before {
    transform: translateX(20px);
}
.cg-switch input:disabled + .cg-switch-slider {
    cursor: not-allowed;
    opacity: 0.45;
}

.cg-switch-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 10px 0;
}
.cg-switch-row .cg-switch-label {
    flex: 1;
    min-width: 0;
}
.cg-switch-row .cg-switch-label-title {
    font-weight: 500;
    color: #fff;
    font-size: 14px;
}
.cg-switch-row .cg-switch-label-help {
    color: rgba(255, 255, 255, 0.55);
    font-size: 12px;
    margin-top: 2px;
}

/* Inline form field hints/warnings */
.form-help {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.55);
    margin-top: 4px;
    display: block;
}
.form-help-warning {
    color: var(--warning-amber, #f5a623);
}
.form-help-warning i {
    margin-right: 4px;
}

/* Password strength rule checklist (live ✓ / ✗ as user types) */
.cg-password-rules {
    list-style: none;
    padding: 0;
    margin: 8px 0 0;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.55);
    line-height: 1.7;
}
.cg-password-rules li {
    transition: color 0.15s ease;
}
.cg-password-rules li i {
    width: 16px;
    margin-right: 2px;
    vertical-align: -1px;
}
.cg-password-rules li.cg-rule-pass {
    color: var(--success-green, #2da44e);
}
.cg-password-rules li.cg-rule-fail {
    color: var(--brand-red, #dd443c);
}

/* ---- University page: collapsible category cards ----
   Replaces eight hand-rolled "category header + flat list of links"
   blocks with a single accordion. One card per category, each header
   shows the category name, exam count, and a chevron that rotates on
   open. Each exam row is a button-like link with a clear "Start" CTA. */

.cg-uni-section-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin: 4px 0 14px;
}
.cg-uni-section-title {
    color: #fff;
    margin: 0;
    font-size: 18px;
    font-weight: 600;
}
.cg-uni-section-meta {
    color: rgba(255, 255, 255, 0.55);
    font-size: 13px;
}

.cg-uni-empty {
    background: rgba(45, 164, 78, 0.08);
    border: 1px solid rgba(45, 164, 78, 0.22);
    color: rgba(255, 255, 255, 0.85);
    border-radius: 10px;
    padding: 16px 18px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
}
.cg-uni-empty i {
    color: var(--success-green, #2da44e);
    font-size: 22px;
}

.cg-uni-accordion {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.cg-uni-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 10px;
    overflow: hidden;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}
.cg-uni-card:hover {
    border-color: rgba(255, 255, 255, 0.12);
}

.cg-uni-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 14px 18px;
    background: transparent;
    border: 0;
    color: #fff;
    text-align: left;
    cursor: pointer;
    transition: background-color 0.15s ease;
}
.cg-uni-card-header:hover,
.cg-uni-card-header:focus {
    background: rgba(255, 255, 255, 0.04);
    outline: none;
}
.cg-uni-card-header[aria-expanded="true"] {
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.cg-uni-cat-name {
    font-size: 15px;
    font-weight: 500;
    color: #fff;
}
.cg-uni-cat-meta {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}
.cg-uni-cat-count {
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.75);
    border-radius: 999px;
    padding: 2px 10px;
    font-size: 12px;
    font-weight: 500;
}
.cg-uni-chevron {
    color: rgba(255, 255, 255, 0.55);
    font-size: 22px;
    line-height: 1;
    transition: transform 0.18s ease;
}
.cg-uni-card-header[aria-expanded="true"] .cg-uni-chevron {
    transform: rotate(180deg);
}

.cg-uni-card-body {
    padding: 6px 0;
}

.cg-uni-exam-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 18px;
    color: rgba(255, 255, 255, 0.92);
    text-decoration: none;
    transition: background-color 0.12s ease, color 0.12s ease;
    border-left: 3px solid transparent;
}
.cg-uni-exam-row:hover,
.cg-uni-exam-row:focus {
    background: rgba(221, 68, 60, 0.08);
    color: #fff;
    border-left-color: var(--brand-red, #dd443c);
    text-decoration: none;
}
.cg-uni-exam-name {
    font-size: 14px;
    font-weight: 400;
}
.cg-uni-exam-cta {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--brand-red, #dd443c);
    font-size: 13px;
    font-weight: 500;
    flex-shrink: 0;
    transition: color 0.12s ease, transform 0.12s ease;
}
.cg-uni-exam-cta i {
    font-size: 18px;
}
.cg-uni-exam-row:hover .cg-uni-exam-cta {
    color: #fff;
    transform: translateX(2px);
}

/* Per-category progress (count + thin bar) shown in each accordion header */
.cg-uni-cat-progress {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.cg-uni-cat-bar {
    display: inline-block;
    width: 60px;
    height: 4px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 2px;
    overflow: hidden;
}
.cg-uni-cat-bar-fill {
    display: block;
    height: 100%;
    background: var(--success-green, #2da44e);
    border-radius: 2px;
    transition: width 0.3s ease;
}
.cg-uni-card-done .cg-uni-cat-bar-fill {
    background: var(--success-green, #2da44e);
}
.cg-uni-card-done .cg-uni-cat-name::after {
    content: " ✓";
    color: var(--success-green, #2da44e);
    font-weight: 700;
    margin-left: 4px;
}

/* "Bonus" categories — visible but not counted toward the user's
   completion percentage. Designed to read as "browse if curious"
   without competing with the required curriculum visually. */
.cg-uni-card-bonus {
    opacity: 0.78;
}
.cg-uni-card-bonus:hover { opacity: 1; }
.cg-uni-bonus-tag {
    display: inline-block;
    padding: 1px 8px;
    border-radius: 999px;
    background: rgba(180, 110, 220, 0.16);
    color: #c699e0;
    border: 1px solid rgba(180, 110, 220, 0.32);
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-left: 8px;
    vertical-align: 2px;
}

/* ---- User dashboard ----------------------------------------------
   Hero with effort-focused stats, soft text-alert banner, and a
   cleaner sessions table. No letter grades by design (psychology:
   raw scores don't pile pressure on the user). */

.cg-user-welcome {
    color: #fff;
    font-size: 18px;
    margin-bottom: 14px;
}
.cg-user-welcome strong { color: var(--brand-red, #dd443c); }

/* Soft banner for the text-alert opt-in (used to be a page-takeover) */
.cg-user-banner {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 18px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    margin-bottom: 18px;
    flex-wrap: wrap;
}
.cg-user-banner-text-alert {
    background: rgba(245, 166, 35, 0.06);
    border-color: rgba(245, 166, 35, 0.22);
}
.cg-user-banner-icon {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(245, 166, 35, 0.16);
    color: var(--warning-amber, #f5a623);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    flex-shrink: 0;
}
.cg-user-banner-text-status .cg-user-banner-icon {
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.7);
}
.cg-user-banner-text {
    flex: 1;
    min-width: 0;
    color: rgba(255, 255, 255, 0.88);
    font-size: 14px;
    line-height: 1.5;
}
.cg-user-banner-text strong { color: #fff; }
.cg-user-text-on  { color: var(--success-green, #2da44e) !important; }
.cg-user-text-off { color: rgba(255, 255, 255, 0.55) !important; }
.cg-user-banner-actions {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}
.cg-user-banner-skip {
    color: rgba(255, 255, 255, 0.5);
    font-size: 13px;
}
.cg-user-banner-skip:hover { color: #fff; text-decoration: none; }

/* Hero stats — 4 effort-focused tiles */
.cg-user-hero {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-bottom: 22px;
}
.cg-user-stat {
    background: linear-gradient(135deg, rgba(255,255,255,0.04), rgba(255,255,255,0.015));
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 12px;
    padding: 16px 20px;
    display: flex;
    align-items: center;
    gap: 14px;
    transition: transform 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
    color: inherit;
    text-decoration: none;
}
.cg-user-stat:hover,
.cg-user-stat:focus {
    transform: translateY(-2px);
    border-color: rgba(255, 255, 255, 0.14);
    background: linear-gradient(135deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
    color: inherit;
    text-decoration: none;
}
.cg-user-stat-icon {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    flex-shrink: 0;
}
.cg-user-stat-icon.stat-30d {
    background: rgba(56, 189, 248, 0.16);
    color: #38bdf8;
}
.cg-user-stat-icon.stat-total {
    background: rgba(45, 164, 78, 0.16);
    color: var(--success-green, #2da44e);
}
.cg-user-stat-icon.stat-review {
    background: rgba(245, 166, 35, 0.16);
    color: var(--warning-amber, #f5a623);
}
.cg-user-stat-icon.stat-uni {
    background: rgba(180, 110, 220, 0.16);
    color: #c699e0;
}
.cg-user-stat-num {
    color: #fff;
    font-size: 28px;
    font-weight: 700;
    line-height: 1;
    margin-right: 6px;
}
.cg-user-stat-pct {
    font-size: 18px;
    color: rgba(255, 255, 255, 0.6);
    font-weight: 600;
    margin-left: 1px;
}
.cg-user-stat-label {
    color: rgba(255, 255, 255, 0.6);
    font-size: 13px;
    font-weight: 500;
}
/* Action-state — "to review" tile when count > 0 */
.cg-user-stat-action {
    border-color: rgba(245, 166, 35, 0.45);
    background: linear-gradient(135deg, rgba(245,166,35,0.08), rgba(245,166,35,0.02));
}
/* Active-tile state — used on manager/enterprise hero filter tiles */
.cg-user-stat-active {
    border-color: rgba(56, 189, 248, 0.55);
    background: linear-gradient(135deg, rgba(56,189,248,0.12), rgba(56,189,248,0.03));
    transform: translateY(-1px);
}
/* 3-column hero variant — manager + enterprise dashboards.
   Responsive overrides live below the .cg-user-hero media queries
   so they actually win on narrow viewports. */

/* Sessions card */
.cg-user-sessions-card {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    padding: 18px 20px 14px;
}
.cg-user-sessions-head {
    margin-bottom: 14px;
}
.cg-user-sessions-title {
    color: #fff;
    margin: 0;
    font-size: 18px;
    font-weight: 600;
}
.cg-user-sessions-meta {
    color: rgba(255, 255, 255, 0.55);
    font-size: 13px;
    display: block;
    margin-top: 4px;
}

/* Per-session call-type tag */
.cg-user-type-tag {
    display: inline-block;
    padding: 2px 9px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.08);
}
.cg-user-type-inbound      { background: rgba(45, 164, 78, 0.14);  color: #5cd478; border-color: rgba(45,164,78,0.3); }
.cg-user-type-outbound     { background: rgba(45, 145, 222, 0.14); color: #6ab9f1; border-color: rgba(45,145,222,0.3); }
.cg-user-type-mystery      { background: rgba(180, 110, 220, 0.14); color: #c699e0; border-color: rgba(180,110,220,0.3); }
.cg-user-type-service      { background: rgba(245, 166, 35, 0.14); color: #f5c068; border-color: rgba(245,166,35,0.3); }
.cg-user-type-collections  { background: rgba(221, 68, 60, 0.14);  color: #f08a82; border-color: rgba(221,68,60,0.3); }
.cg-user-type-1on1         { background: rgba(94, 188, 188, 0.14); color: #88d4d4; border-color: rgba(94,188,188,0.3); }
.cg-user-type-receptionist { background: rgba(220, 180, 100, 0.14); color: #e0c68e; border-color: rgba(220,180,100,0.3); }
.cg-user-type-parts        { background: rgba(180, 130, 90, 0.14); color: #d4a87a; border-color: rgba(180,130,90,0.3); }

/* Status pills */
.cg-user-status {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.3px;
}
.cg-user-status-entered {
    background: rgba(45, 164, 78, 0.16);
    color: var(--success-green, #2da44e);
    border: 1px solid rgba(45, 164, 78, 0.32);
}
.cg-user-status-pending {
    background: rgba(245, 166, 35, 0.16);
    color: var(--warning-amber, #f5a623);
    border: 1px solid rgba(245, 166, 35, 0.32);
}
.cg-user-status-na {
    background: rgba(255, 255, 255, 0.04);
    color: rgba(255, 255, 255, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.cg-user-view-link {
    color: var(--brand-red, #dd443c);
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
}
.cg-user-view-link:hover { color: var(--brand-red-dark, #b8362f); text-decoration: underline; }

@media (max-width: 1100px) {
    .cg-user-hero { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
    .cg-user-hero { grid-template-columns: 1fr; }
    .cg-user-banner { flex-direction: column; align-items: flex-start; }
    .cg-user-banner-actions { flex-wrap: wrap; }
}

/* 3-column hero variant — sits AFTER the .cg-user-hero media queries
   so these rules win at every breakpoint (same specificity, later
   declaration). minmax(0, 1fr) prevents long labels from forcing
   a tile wider than its share. */
.cg-user-hero-3col { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 900px) {
    .cg-user-hero-3col { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
    .cg-user-hero-3col { grid-template-columns: 1fr; }
}

/* ---- Manager dashboard add-ons ----
   Letter-grade badges + the "needs coaching" attention card. Letter
   grades are intentionally OFF on the user dashboard (psychology),
   but useful for managers + enterprise scanning team performance. */
.cg-mgr-grade {
    display: inline-block;
    width: 24px;
    height: 24px;
    line-height: 22px;
    text-align: center;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0;
    border: 1px solid transparent;
    vertical-align: middle;
}
.cg-mgr-grade-a {
    background: rgba(45, 164, 78, 0.18);
    color: #5cd478;
    border-color: rgba(45, 164, 78, 0.4);
}
.cg-mgr-grade-b {
    background: rgba(56, 189, 248, 0.16);
    color: #60c2f5;
    border-color: rgba(56, 189, 248, 0.38);
}
.cg-mgr-grade-c {
    background: rgba(245, 166, 35, 0.16);
    color: var(--warning-amber, #f5a623);
    border-color: rgba(245, 166, 35, 0.38);
}
.cg-mgr-grade-d {
    background: rgba(220, 130, 60, 0.16);
    color: #f0a060;
    border-color: rgba(220, 130, 60, 0.4);
}
.cg-mgr-grade-f {
    background: rgba(220, 50, 50, 0.18);
    color: #ff7a72;
    border-color: rgba(220, 50, 50, 0.4);
}

.cg-mgr-attention-card {
    background: rgba(245, 166, 35, 0.04);
    border: 1px solid rgba(245, 166, 35, 0.2);
    border-radius: 12px;
    padding: 16px 20px;
    margin-bottom: 22px;
}
.cg-mgr-attention-head {
    margin-bottom: 12px;
}
.cg-mgr-attention-title {
    color: #fff;
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
}
.cg-mgr-attention-title i {
    color: var(--warning-amber, #f5a623);
    font-size: 20px;
}
.cg-mgr-attention-meta {
    color: rgba(255, 255, 255, 0.55);
    font-size: 12px;
    display: block;
    margin-top: 2px;
}

.cg-mgr-attention-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.cg-mgr-attention-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 10px 14px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.92);
    text-decoration: none;
    transition: background-color 0.12s ease, border-color 0.12s ease, transform 0.1s ease;
}
.cg-mgr-attention-row:hover,
.cg-mgr-attention-row:focus {
    background: rgba(245, 166, 35, 0.08);
    border-color: rgba(245, 166, 35, 0.32);
    color: #fff;
    text-decoration: none;
    transform: translateX(2px);
}
.cg-mgr-attention-name {
    font-size: 14px;
    font-weight: 500;
    flex: 1;
    min-width: 0;
}
.cg-mgr-attention-stats {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-shrink: 0;
}
.cg-mgr-attention-stat {
    color: rgba(255, 255, 255, 0.55);
    font-size: 12px;
}
.cg-mgr-attention-score {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    min-width: 90px;
    justify-content: flex-end;
}
.cg-mgr-attention-100 {
    color: rgba(255, 255, 255, 0.4);
    font-weight: 400;
    margin-left: 1px;
}

@media (max-width: 600px) {
    .cg-mgr-attention-row { flex-direction: column; align-items: flex-start; }
    .cg-mgr-attention-stats { width: 100%; justify-content: flex-end; }
}

/* Status pill + CTA pair on the right side of each exam row */
.cg-uni-exam-end {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}
.cg-uni-pill {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.2px;
    line-height: 1.4;
    white-space: nowrap;
}
.cg-uni-pill.pill-passed {
    background: rgba(45, 164, 78, 0.15);
    color: var(--success-green, #2da44e);
    border: 1px solid rgba(45, 164, 78, 0.35);
}
.cg-uni-pill.pill-failed {
    background: rgba(245, 166, 35, 0.15);
    color: var(--warning-amber, #f5a623);
    border: 1px solid rgba(245, 166, 35, 0.35);
}
.cg-uni-pill.pill-new {
    background: rgba(255, 255, 255, 0.04);
    color: rgba(255, 255, 255, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Per-status row treatments: dim passed exams, emphasize failed retakes */
.cg-uni-exam-passed {
    opacity: 0.78;
}
.cg-uni-exam-passed .cg-uni-exam-name {
    color: rgba(255, 255, 255, 0.7);
}
.cg-uni-exam-passed .cg-uni-exam-cta {
    color: rgba(255, 255, 255, 0.55);
}
.cg-uni-exam-passed:hover {
    opacity: 1;
    background: rgba(45, 164, 78, 0.06);
    border-left-color: var(--success-green, #2da44e);
}
.cg-uni-exam-passed:hover .cg-uni-exam-cta {
    color: var(--success-green, #2da44e);
}

.cg-uni-exam-failed .cg-uni-exam-cta {
    color: var(--warning-amber, #f5a623);
}
.cg-uni-exam-failed:hover {
    background: rgba(245, 166, 35, 0.08);
    border-left-color: var(--warning-amber, #f5a623);
}
.cg-uni-exam-failed:hover .cg-uni-exam-cta {
    color: var(--warning-amber, #f5a623);
}

/* ---- University: progress hero ----
   Big motivating panel at the top of the page. Shows completion %, an
   animated tri-color stacked progress bar, three icon-led stat tiles,
   and a featured "Up next" CTA card. Designed to feel like a friendly
   online-learning platform, not an admin report. */

.cg-uni-hero {
    position: relative;
    background:
        radial-gradient(circle at 0% 0%, rgba(221, 68, 60, 0.18), transparent 55%),
        radial-gradient(circle at 100% 100%, rgba(45, 164, 78, 0.14), transparent 55%),
        linear-gradient(135deg, rgba(255,255,255,0.04), rgba(255,255,255,0.015));
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    padding: 24px 28px;
    margin-bottom: 20px;
    overflow: hidden;
}
.cg-uni-hero-complete {
    background:
        radial-gradient(circle at 0% 0%, rgba(45, 164, 78, 0.22), transparent 55%),
        radial-gradient(circle at 100% 100%, rgba(45, 164, 78, 0.18), transparent 55%),
        linear-gradient(135deg, rgba(45, 164, 78, 0.06), rgba(255,255,255,0.015));
    border-color: rgba(45, 164, 78, 0.32);
}

.cg-uni-hero-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 18px;
}
.cg-uni-hero-headline { min-width: 0; }
.cg-uni-hero-eyebrow {
    color: var(--brand-red, #dd443c);
    text-transform: uppercase;
    letter-spacing: 1.2px;
    font-size: 11px;
    font-weight: 600;
    margin-bottom: 6px;
}
.cg-uni-hero-tagline {
    color: #fff;
    font-size: 22px;
    font-weight: 600;
    line-height: 1.25;
}
.cg-uni-hero-pct {
    text-align: right;
    flex-shrink: 0;
    line-height: 1;
}
.cg-uni-hero-pct-number {
    font-size: 48px;
    font-weight: 700;
    color: #fff;
    letter-spacing: -1px;
    line-height: 1;
}
.cg-uni-hero-pct-mark {
    font-size: 28px;
    color: rgba(255, 255, 255, 0.6);
    margin-left: 2px;
}
.cg-uni-hero-pct-label {
    color: rgba(255, 255, 255, 0.65);
    font-size: 12px;
    margin-top: 6px;
}

/* Animated tri-color stacked progress bar */
.cg-uni-hero-bar {
    display: flex;
    width: 100%;
    height: 10px;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 999px;
    overflow: hidden;
    margin-bottom: 22px;
}
.cg-uni-hero-bar-seg {
    height: 100%;
    width: 0;
    transition: width 0.9s cubic-bezier(.22,.61,.36,1);
    animation: cgUniBarGrow 0.9s cubic-bezier(.22,.61,.36,1) forwards;
}
.cg-uni-hero-bar-seg.seg-passed { background: linear-gradient(90deg, #2da44e, #34c25c); }
.cg-uni-hero-bar-seg.seg-failed { background: linear-gradient(90deg, #f5a623, #f7b94d); }
.cg-uni-hero-bar-seg.seg-new    { background: rgba(255, 255, 255, 0.1); }

@keyframes cgUniBarGrow {
    from { width: 0 !important; }
    /* "to" comes from the inline style="width: X%" */
}

/* Three icon-led stat tiles in a row */
.cg-uni-hero-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-bottom: 18px;
}
.cg-uni-stat {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    padding: 14px 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    transition: transform 0.15s ease, border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
    /* Tiles are <button> elements — reset native styles */
    width: 100%;
    text-align: left;
    color: inherit;
    font: inherit;
    cursor: pointer;
}
.cg-uni-stat:hover:not(:disabled) {
    transform: translateY(-2px);
    border-color: rgba(255, 255, 255, 0.14);
    background: rgba(255, 255, 255, 0.06);
}
.cg-uni-stat:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(221, 68, 60, 0.35);
}
.cg-uni-stat:disabled {
    cursor: default;
    opacity: 0.5;
}
.cg-uni-stat:disabled:hover { transform: none; }

/* Active state when this filter is applied */
.cg-uni-stat-active.stat-passed {
    border-color: rgba(45, 164, 78, 0.6);
    background: rgba(45, 164, 78, 0.10);
    box-shadow: 0 0 0 1px rgba(45, 164, 78, 0.4);
}
.cg-uni-stat-active.stat-failed {
    border-color: rgba(245, 166, 35, 0.6);
    background: rgba(245, 166, 35, 0.10);
    box-shadow: 0 0 0 1px rgba(245, 166, 35, 0.4);
}
.cg-uni-stat-active.stat-new {
    border-color: rgba(221, 68, 60, 0.6);
    background: rgba(221, 68, 60, 0.10);
    box-shadow: 0 0 0 1px rgba(221, 68, 60, 0.4);
}

/* "Clear filter" button shown next to the curriculum heading */
.cg-uni-clear-filter {
    background: none;
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.78);
    border-radius: 999px;
    padding: 4px 12px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    margin-left: 10px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.cg-uni-clear-filter:hover,
.cg-uni-clear-filter:focus {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.22);
    color: #fff;
    outline: none;
}
.cg-uni-clear-filter i { font-size: 14px; }
#cgUniFilterLabel {
    color: rgba(255, 255, 255, 0.62);
    font-style: italic;
}

/* ---- DataTables ajax progress bar ----
   The default DataTables "Processing..." box is hidden (it renders as a
   nearly-invisible dark tile on the dark theme). Pages that want a
   visible loading indicator inject .cg-dt-progress at the top of the
   wrapper and drive its fill width via the preXhr.dt / xhr.dt events.
   The bar climbs asymptotically toward ~90% while the request is in
   flight, then snaps to 100% on response — like Chrome's loading bar
   or NProgress.js. */
.dataTables_wrapper {
    position: relative;
}
.dataTables_processing {
    /* Hide the default DataTables processing element entirely */
    display: none !important;
}

.cg-dt-progress {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: rgba(255, 255, 255, 0.04);
    overflow: hidden;
    pointer-events: none;
    z-index: 10;
    opacity: 0;
    transition: opacity 0.25s ease;
}
.cg-dt-progress-active { opacity: 1; }
.cg-dt-progress-done   { opacity: 0; transition: opacity 0.25s ease 0.18s; }

.cg-dt-progress-fill {
    height: 100%;
    width: 0;
    background: linear-gradient(90deg, #b8362f, var(--brand-red, #dd443c) 50%, #ff6a5e);
    box-shadow: 0 0 8px rgba(221, 68, 60, 0.55);
    border-top-right-radius: 2px;
    border-bottom-right-radius: 2px;
    transition: width 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.cg-dt-progress-done .cg-dt-progress-fill {
    transition: width 0.16s ease-out;
}

/* ---- Duplicate-detection modal (newperson / multiple-staff) ----
   One card per matching person. Clear status pill, the reason(s) it
   matched, and inline "Also remove from <company>" checkboxes for
   re-assignment when the match is already at another company. */
.cg-dup-match {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 16px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 10px;
    margin-bottom: 10px;
}
.cg-dup-info { flex: 1; min-width: 0; }
.cg-dup-rowlabel {
    color: rgba(255, 255, 255, 0.55);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    margin-bottom: 4px;
}
.cg-dup-rowlabel strong { color: rgba(255, 255, 255, 0.92); }
.cg-dup-name {
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.cg-dup-status {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.5px;
    line-height: 1.4;
}
.cg-dup-status-active {
    background: rgba(45, 164, 78, 0.16);
    color: var(--success-green, #2da44e);
    border: 1px solid rgba(45, 164, 78, 0.4);
}
.cg-dup-status-inactive {
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.62);
    border: 1px solid rgba(255, 255, 255, 0.14);
}
.cg-dup-meta {
    color: rgba(255, 255, 255, 0.7);
    font-size: 13px;
    margin-top: 4px;
}

/* Structured field list — Email / Phone / Cell / Title / Role / Last
   login — shown beneath the name on each duplicate-match card. Two-
   column grid so the rows compare side-by-side without taking too
   much vertical space. */
.cg-dup-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px 18px;
    margin-top: 8px;
    font-size: 13px;
}
.cg-dup-field {
    display: flex;
    align-items: baseline;
    gap: 8px;
    color: rgba(255, 255, 255, 0.85);
    min-width: 0;
}
.cg-dup-field-label {
    color: rgba(255, 255, 255, 0.45);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    min-width: 70px;
    flex-shrink: 0;
}
.cg-dup-field-value {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
@media (max-width: 640px) {
    .cg-dup-fields { grid-template-columns: 1fr; }
}
.cg-dup-reasons {
    color: var(--brand-red, #dd443c);
    font-size: 12px;
    margin-top: 4px;
    font-weight: 500;
}
.cg-dup-warning {
    margin-top: 8px;
    padding: 8px 12px;
    background: rgba(245, 166, 35, 0.08);
    border: 1px solid rgba(245, 166, 35, 0.28);
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.85);
    font-size: 12px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.cg-dup-warning i {
    color: var(--warning-amber, #f5a623);
    font-size: 16px;
}
.cg-dup-companies {
    margin-top: 8px;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.62);
}
.cg-dup-companies-heading {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: rgba(255, 255, 255, 0.5);
    margin-bottom: 4px;
}
.cg-dup-company-line {
    color: rgba(255, 255, 255, 0.85);
    padding: 2px 0;
}
.cg-dup-unassign {
    display: block;
    color: rgba(255, 255, 255, 0.85);
    cursor: pointer;
    margin: 4px 0 0;
    font-size: 12px;
    user-select: none;
}
.cg-dup-unassign input { margin-right: 6px; vertical-align: -1px; }
.cg-dup-unassign strong { color: #fff; }
.cg-dup-actions {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex-shrink: 0;
    align-items: stretch;
    min-width: 160px;
}
.cg-dup-actions .btn { white-space: nowrap; }

/* Modal content uses the brand dark surface */
.cg-dup-modal .modal-content {
    background: #1a1a1a;
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.92);
}
.cg-dup-modal .modal-header,
.cg-dup-modal .modal-footer {
    border-color: rgba(255, 255, 255, 0.06);
}
.cg-dup-modal .modal-title { color: #fff; }
.cg-dup-modal .close { color: rgba(255, 255, 255, 0.7); text-shadow: none; opacity: 1; }
.cg-dup-modal .close:hover { color: #fff; }
.cg-uni-stat-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    flex-shrink: 0;
}
.cg-uni-stat.stat-passed .cg-uni-stat-icon {
    background: rgba(45, 164, 78, 0.16);
    color: var(--success-green, #2da44e);
}
.cg-uni-stat.stat-failed .cg-uni-stat-icon {
    background: rgba(245, 166, 35, 0.16);
    color: var(--warning-amber, #f5a623);
}
.cg-uni-stat.stat-new .cg-uni-stat-icon {
    background: rgba(221, 68, 60, 0.14);
    color: var(--brand-red, #dd443c);
}
.cg-uni-stat-num {
    color: #fff;
    font-size: 24px;
    font-weight: 700;
    line-height: 1;
    margin-right: 4px;
}
.cg-uni-stat-label {
    color: rgba(255, 255, 255, 0.62);
    font-size: 13px;
    font-weight: 500;
}

/* Featured "Up next" / "Retake" CTA card */
.cg-uni-next-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    background: linear-gradient(135deg, rgba(221, 68, 60, 0.18), rgba(221, 68, 60, 0.06));
    border: 1px solid rgba(221, 68, 60, 0.28);
    border-radius: 12px;
    padding: 16px 20px;
    color: #fff;
    text-decoration: none;
    transition: transform 0.15s ease, box-shadow 0.18s ease, border-color 0.15s ease;
}
.cg-uni-next-card:hover,
.cg-uni-next-card:focus {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(221, 68, 60, 0.25);
    border-color: rgba(221, 68, 60, 0.55);
    color: #fff;
    text-decoration: none;
}
.cg-uni-next-meta { min-width: 0; }
.cg-uni-next-kind {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--brand-red, #dd443c);
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 11px;
    font-weight: 600;
    margin-bottom: 4px;
}
.cg-uni-next-title {
    color: #fff;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.25;
    overflow: hidden;
    text-overflow: ellipsis;
}
.cg-uni-next-cat {
    color: rgba(255, 255, 255, 0.55);
    font-size: 13px;
    margin-top: 4px;
}
.cg-uni-next-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    background: var(--brand-red, #dd443c);
    color: #fff;
    padding: 10px 20px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 600;
    transition: background-color 0.15s ease, transform 0.15s ease;
}
.cg-uni-next-cta i { font-size: 20px; }
.cg-uni-next-card:hover .cg-uni-next-cta {
    background: var(--brand-red-dark, #b8362f);
    transform: translateX(2px);
}

/* Achievements row (shown only if any category is fully mastered) */
.cg-uni-achievements {
    margin-bottom: 20px;
    padding: 14px 18px;
    background: rgba(245, 166, 35, 0.06);
    border: 1px solid rgba(245, 166, 35, 0.22);
    border-radius: 12px;
}
.cg-uni-achievements-label {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--warning-amber, #f5a623);
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 10px;
}
.cg-uni-achievements-label i { font-size: 18px; }
.cg-uni-achievements-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.cg-uni-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(45, 164, 78, 0.12);
    color: var(--success-green, #2da44e);
    border: 1px solid rgba(45, 164, 78, 0.32);
    border-radius: 999px;
    padding: 4px 12px;
    font-size: 12px;
    font-weight: 500;
}
.cg-uni-badge i { font-size: 16px; }

/* ---- University: Team-progress tab (manager + enterprise) ---- */
.cg-uni-tabs {
    display: flex;
    gap: 4px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    margin: 0 0 22px;
}
.cg-uni-tab {
    color: rgba(255, 255, 255, 0.55);
    text-decoration: none;
    padding: 10px 18px;
    border-bottom: 2px solid transparent;
    font-size: 14px;
    font-weight: 500;
    transition: color 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.cg-uni-tab i { font-size: 17px; }
.cg-uni-tab:hover,
.cg-uni-tab:focus {
    color: #fff;
    text-decoration: none;
    background: rgba(255, 255, 255, 0.03);
}
.cg-uni-tab-active {
    color: #fff;
    border-bottom-color: var(--brand-red, #dd443c);
}

.cg-uni-team-hero {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 18px;
}
.cg-uni-team-stat {
    background: linear-gradient(135deg, rgba(255,255,255,0.04), rgba(255,255,255,0.015));
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 12px;
    padding: 16px 20px;
    display: flex;
    align-items: center;
    gap: 14px;
    transition: transform 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
    color: inherit;
    text-decoration: none;
}
.cg-uni-team-stat:hover,
.cg-uni-team-stat:focus {
    transform: translateY(-2px);
    border-color: rgba(255, 255, 255, 0.14);
    color: inherit;
    text-decoration: none;
}
.cg-uni-team-stat-active {
    border-color: rgba(56, 189, 248, 0.55);
    background: linear-gradient(135deg, rgba(56,189,248,0.12), rgba(56,189,248,0.03));
    transform: translateY(-1px);
}
.cg-uni-team-stat-icon {
    width: 44px; height: 44px;
    border-radius: 10px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 24px; flex-shrink: 0;
}
.cg-uni-team-stat-icon.stat-team     { background: rgba(180,110,220,0.16); color: #c699e0; }
.cg-uni-team-stat-icon.stat-mastered { background: rgba(45,164,78,0.16);   color: var(--success-green, #2da44e); }
.cg-uni-team-stat-icon.stat-progress { background: rgba(56,189,248,0.16);  color: #38bdf8; }
.cg-uni-team-stat-icon.stat-new      { background: rgba(245,166,35,0.16);  color: var(--warning-amber, #f5a623); }
.cg-uni-team-stat-num {
    color: #fff; font-size: 28px; font-weight: 700; line-height: 1; margin-right: 6px;
}
.cg-uni-team-stat-label { color: rgba(255,255,255,0.6); font-size: 13px; font-weight: 500; }

@media (max-width: 900px) {
    .cg-uni-team-hero { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
    .cg-uni-team-hero { grid-template-columns: 1fr; }
}

/* Cross-cutting "needs retake" callout */
.cg-uni-team-retake-row { margin: 0 0 18px; }
.cg-uni-team-retake {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-radius: 999px;
    background: rgba(245, 166, 35, 0.10);
    border: 1px solid rgba(245, 166, 35, 0.35);
    color: #f5d59a;
    font-size: 13px;
    text-decoration: none;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}
.cg-uni-team-retake:hover,
.cg-uni-team-retake:focus {
    background: rgba(245, 166, 35, 0.18);
    border-color: rgba(245, 166, 35, 0.55);
    color: #fff;
    text-decoration: none;
}
.cg-uni-team-retake i { font-size: 16px; }
.cg-uni-team-retake strong { color: #fff; font-weight: 700; }
.cg-uni-team-retake-active {
    background: rgba(245, 166, 35, 0.22);
    border-color: rgba(245, 166, 35, 0.7);
    color: #fff;
}

/* Per-staff table card */
.cg-uni-team-card {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    padding: 18px 20px 14px;
}
.cg-uni-team-card-head { margin-bottom: 14px; }
.cg-uni-team-card-title { color: #fff; margin: 0; font-size: 18px; font-weight: 600; }
.cg-uni-team-card-meta {
    display: block;
    color: rgba(255, 255, 255, 0.55);
    font-size: 13px;
    margin-top: 4px;
}
.cg-uni-team-empty {
    padding: 28px 20px;
    text-align: center;
    color: rgba(255, 255, 255, 0.55);
    font-size: 14px;
}
.cg-uni-team-empty a { color: var(--brand-red, #dd443c); }

/* Inline progress bar in the table */
.cg-uni-team-bar {
    width: 140px;
    max-width: 100%;
    height: 6px;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 999px;
    overflow: hidden;
    display: inline-block;
    vertical-align: middle;
}
.cg-uni-team-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #38bdf8, var(--success-green, #2da44e));
    transition: width 0.3s ease;
}
.cg-uni-team-bar-label {
    display: inline-block;
    margin-left: 8px;
    color: rgba(255, 255, 255, 0.75);
    font-size: 12px;
    font-weight: 600;
    vertical-align: middle;
    min-width: 32px;
}

.cg-uni-team-retake-tag {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    margin-left: 6px;
    padding: 2px 7px;
    border-radius: 999px;
    background: rgba(245, 166, 35, 0.14);
    color: #f5d59a;
    font-size: 11px;
    font-weight: 600;
}
.cg-uni-team-retake-tag i { font-size: 12px; }

/* Status pills */
.cg-uni-team-pill {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.02em;
}
.cg-uni-team-pill-mastered  { background: rgba(45,164,78,0.18);  color: #6cd789; }
.cg-uni-team-pill-inprogress { background: rgba(56,189,248,0.18); color: #7ed1fb; }
.cg-uni-team-pill-notstarted { background: rgba(245,166,35,0.18); color: #f5d59a; }
.cg-uni-team-pill-nocurric   { background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.55); }

/* Mobile: stack hero rows */
@media (max-width: 640px) {
    .cg-uni-hero { padding: 18px 18px; }
    .cg-uni-hero-top { flex-direction: column; gap: 12px; }
    .cg-uni-hero-pct { text-align: left; }
    .cg-uni-hero-pct-number { font-size: 36px; }
    .cg-uni-hero-tagline { font-size: 18px; }
    .cg-uni-hero-stats { grid-template-columns: 1fr; }
    .cg-uni-next-card { flex-direction: column; align-items: stretch; gap: 12px; }
    .cg-uni-next-cta { justify-content: center; }
}

/* ---- Page-title icon ----
   Mirrors the icon shown next to the same destination in the leftnav,
   so the page header reads as a clear continuation of the side nav. */
.cg-page-title-icon {
    color: var(--brand-red, #dd443c);
    margin-right: 10px;
    font-size: 0.95em;
    vertical-align: -1px;
}