/* 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(5, 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;
}

/* Merged outer card: collapses Coach + the 4 numbered steps into one
   visual container with thin dividers, instead of 5 separate cards. */
.cg-puller-card-merged {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    margin-bottom: 14px;
    overflow: hidden;
}
.cg-puller-card-merged .cg-puller-section {
    background: transparent;
    border: 0;
    border-radius: 0;
    margin: 0;
}
.cg-puller-card-merged > form {
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.cg-puller-card-merged form > .cg-puller-section + .cg-puller-section {
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

/* Filter chips above the report — mirror the hero cards so the puller
   can switch the table view without scrolling back to the top. */
.cg-puller-chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 14px;
}
/* Variant: chip row moved into the LEFT column of the DataTables top
   toolbar, next to the "Show N entries" length control. Left-aligned
   so the filters live on the left and Search stays alone on the right,
   both on the same line. */
.cg-puller-chip-row-inline {
    align-items: center;
    margin-bottom: 0;
}
/* Left toolbar col: Show-entries + filter chips, left-aligned. Given
   extra width so all four chips fit beside the length control. */
#basic-datatable_wrapper > .row > .col-sm-12.col-md-6:first-child {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    flex: 0 0 78%;
    max-width: 78%;
}
/* Right toolbar col: just the Search box, right-aligned. */
#basic-datatable_wrapper > .row > .col-sm-12.col-md-6:last-child {
    flex: 0 0 22%;
    max-width: 22%;
}
#basic-datatable_wrapper > .row > .col-sm-12.col-md-6:last-child .dataTables_filter {
    float: right;
    margin: 0;
}
.cg-puller-filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 999px;
    color: rgba(255, 255, 255, 0.75);
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.cg-puller-filter-chip:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.16);
    color: #fff;
    text-decoration: none;
}
.cg-puller-filter-chip-active,
.cg-puller-filter-chip-active:hover {
    background: var(--brand-red, #dd443c);
    border-color: var(--brand-red, #dd443c);
    color: #fff;
}
.cg-puller-filter-chip-count {
    background: rgba(0, 0, 0, 0.25);
    border-radius: 999px;
    padding: 1px 8px;
    font-size: 11px;
    font-weight: 600;
}
.cg-puller-filter-chip-active .cg-puller-filter-chip-count {
    background: rgba(255, 255, 255, 0.2);
}
.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;
}
/* The open option list uses native popup colors — without an explicit
   dark background the white option text was invisible on white. */
.cg-puller-coach-filter select option {
    background-color: #464f5b;
    color: #e3eaef;
}
.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,
.cg-viewas-item.cg-viewas-item-kb {
    background: rgba(221, 68, 60, 0.08);
    border-color: rgba(221, 68, 60, 0.4);
    transform: translateX(2px);
}
.cg-viewas-item.cg-viewas-item-kb .cg-viewas-item-arrow {
    opacity: 1;
    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); }
.cg-coach-type-ibob        { background: rgba(45, 145, 222, 0.14); color: #6ab9f1; border-color: rgba(45,145,222,0.3); }
.cg-coach-type-parts       { background: rgba(160, 140, 100, 0.14); color: #c8b888; border-color: rgba(160,140,100,0.3); }
.cg-coach-type-monthlyrecap { background: rgba(120, 160, 200, 0.14); color: #a0c4e0; border-color: rgba(120,160,200,0.3); }
.cg-coach-type-translations { background: rgba(180, 140, 180, 0.14); color: #c8a8c8; border-color: rgba(180,140,180,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;
}

/* Uniform field styling for the pull-a-call form — matches the
   .form-control look used on the performance report / billing pages
   (dark grey bg, left-aligned text, consistent height). Without the
   explicit text-align:left the bare selects/inputs were inheriting a
   right-aligned style from the theme. .cg-puller-readonly keeps its
   own !important bg for the disabled tracking creds. */
.cg-puller-form input:not(.cg-puller-readonly),
.cg-puller-form select,
.cg-puller-form textarea:not(.cg-puller-readonly),
.cg-puller-coach-select,
.dashboard-puller #companies,
.dashboard-puller #people {
    text-align: left;
    background-color: #464f5b;
    color: #e3eaef;
    border: 1px solid #4d5764;
    border-radius: 0.25rem;
    padding: 0.45rem 0.9rem;
    font-size: 0.875rem;
}
.cg-puller-form input:not(.cg-puller-readonly),
.cg-puller-form select,
.cg-puller-coach-select,
.dashboard-puller #companies,
.dashboard-puller #people {
    height: calc(2.2125rem + 2px);
}
.cg-puller-form select option {
    background-color: #464f5b;
    color: #e3eaef;
}

@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);
}
/* Green variant — used where "on" means active/healthy rather than a
   brand action (dormant reports, performance report, puller dash). */
.cg-switch.cg-switch-green input:checked + .cg-switch-slider {
    background-color: var(--success-green, #2da44e);
}
.cg-switch.cg-switch-green input:focus-visible + .cg-switch-slider {
    box-shadow: 0 0 0 3px rgba(45, 164, 78, 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-icon.stat-danger {
    background: rgba(221, 68, 60, 0.16);
    color: var(--brand-red, #dd443c);
}

/* ---- Shared form-input styling -----------------------------------
   Matches website_lead_new.php's pattern: small uppercase label
   above input, dark .form-control with brand-red focus ring. Scoped
   under .cg-form-card so styling doesn't bleed onto other pages
   that use .form-control (DataTables filter input, etc.). */
.cg-section-title {
    font-size: 12px;
    font-weight: 700;
    color: #cbd5e1;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 14px;
    padding-bottom: 6px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.cg-field-label {
    font-size: 11px;
    font-weight: 600;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 4px;
}
.cg-help-text {
    font-size: 11px;
    color: #94a3b8;
    margin-top: 2px;
}
.cg-required-marker { color: #f87171; }
.cg-form-card .form-control {
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #f1f5f9;
    width: 100%;
    font-size: 14px;
}
.cg-form-card .form-control:focus {
    border-color: var(--brand-red, #cf2e2e);
    box-shadow: 0 0 0 0.15rem rgba(207, 46, 46, 0.25);
    color: #fff;
    outline: none;
}
.cg-form-card textarea.form-control { min-height: 80px; }

/* Compact inline switch for hero / toolbar use. Same slider as
   .cg-switch, but rendered inline-flex with a short title to its
   right instead of the stacked title + help-text in .cg-switch-row.
   Active state is green (success) for company-status toggles --
   the base .cg-switch turns brand-red, which reads as "alarm"
   for an on-state like Active. */
.cg-switch-inline {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    cursor: pointer;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.85);
}
.cg-switch-inline-label { white-space: nowrap; }
.cg-switch-inline .cg-switch input:checked + .cg-switch-slider {
    background-color: var(--success-green, #2da44e);
}
.cg-switch-inline .cg-switch input:focus-visible + .cg-switch-slider {
    box-shadow: 0 0 0 3px rgba(45, 164, 78, 0.25);
}

/* Same green-when-on override for cg-switch-row inside .cg-form-card
   so company-status toggles (Chat client on Setup, Call tracking on
   its tab) match the hero's Active / Test toggles instead of reading
   alarm-red. cg-switch-row elsewhere (myaccount Text alerts) keeps the
   base brand-red. */
.cg-form-card .cg-switch-row .cg-switch input:checked + .cg-switch-slider {
    background-color: var(--success-green, #2da44e);
}
.cg-form-card .cg-switch-row .cg-switch input:focus-visible + .cg-switch-slider {
    box-shadow: 0 0 0 3px rgba(45, 164, 78, 0.25);
}

/* When the hero actions column hosts the toggles, stack them
   vertically (toggle, toggle, button) instead of the default
   horizontal flex used by .cg-pe-hero-actions. */
.cg-ce-hero-actions-stack {
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
}

/* ---- Left-justified DataTables sort arrows ----------------------
   Opt-in class for DataTables headers. Apply to any <table> using
   the DataTables sorting affordance and the up/down chevrons move
   from right-of-label to left-of-label. Default Bootstrap-DataTables
   ships them on the right (right:0.5em + padding-right:30px). */
table.dataTable.cg-sort-left thead > tr > th.sorting,
table.dataTable.cg-sort-left thead > tr > th.sorting_asc,
table.dataTable.cg-sort-left thead > tr > th.sorting_desc {
    padding-right: 0.5rem;
    padding-left: 26px;
}
table.dataTable.cg-sort-left thead .sorting::before,
table.dataTable.cg-sort-left thead .sorting::after,
table.dataTable.cg-sort-left thead .sorting_asc::before,
table.dataTable.cg-sort-left thead .sorting_asc::after,
table.dataTable.cg-sort-left thead .sorting_desc::before,
table.dataTable.cg-sort-left thead .sorting_desc::after {
    right: auto;
    left: 0.5rem;
}
.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;
}
/* Space between stacked sessions cards (e.g. the enterprise
   dashboard's "Stores at a glance" + "Recent sessions"). */
.cg-user-sessions-card + .cg-user-sessions-card {
    margin-top: 18px;
}
.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); }

/* Score pills on performancereport.php (and anywhere else we want a
   shaded, modernized version of the old solid-fill score cells).
   Keeps the existing green/purple/blue/orange/red color associations
   so admins/coaches reading these don't need to relearn the mapping;
   just rendered as tinted pills in the cg-user-type-tag style instead
   of saturated full-cell backgrounds. */
.cg-score-pill {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.3px;
    border: 1px solid transparent;
    min-width: 56px;
    text-align: center;
}
.cg-score-pill-excellent { /* 90+ : green */
    background: rgba(125, 200, 110, 0.16);
    color: #b4eba6;
    border-color: rgba(125, 200, 110, 0.4);
}
.cg-score-pill-good      { /* 80-89 : purple */
    background: rgba(155, 130, 220, 0.16);
    color: #c3b5e6;
    border-color: rgba(155, 130, 220, 0.4);
}
.cg-score-pill-fair      { /* 70-79 : blue */
    background: rgba(80, 135, 198, 0.18);
    color: #88b4dc;
    border-color: rgba(80, 135, 198, 0.4);
}
.cg-score-pill-low       { /* 60-69 : orange */
    background: rgba(255, 164, 82, 0.16);
    color: #ffb878;
    border-color: rgba(255, 164, 82, 0.4);
}
.cg-score-pill-poor      { /* <60 : red */
    background: rgba(248, 38, 38, 0.16);
    color: #ff8278;
    border-color: rgba(248, 38, 38, 0.4);
}
/* Dimmed "/100" denominator inside a score pill -- keeps the score
   readable as a ratio without competing visually with the numerator. */
.cg-score-pill-denom {
    opacity: 0.55;
    font-weight: 500;
    margin-left: 1px;
}

/* 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; }
}

.cg-user-hero-4col { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1200px) {
    .cg-user-hero-4col { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
    .cg-user-hero-4col { 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); }

/* Inline toggle on templates.php: flip a row's active state without
   leaving the page. */
.cg-tpl-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: transparent;
    border: 0;
    padding: 0;
    color: inherit;
    cursor: pointer;
    font: inherit;
}
.cg-tpl-toggle:focus { outline: none; }
.cg-tpl-toggle-track {
    width: 34px;
    height: 18px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.12);
    position: relative;
    flex-shrink: 0;
    transition: background-color 0.18s ease;
}
.cg-tpl-toggle-thumb {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
    transition: left 0.18s ease, background-color 0.18s ease;
}
.cg-tpl-toggle-label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: rgba(255, 255, 255, 0.55);
}
.cg-tpl-toggle-on .cg-tpl-toggle-track {
    background: rgba(45, 164, 78, 0.55);
}
.cg-tpl-toggle-on .cg-tpl-toggle-thumb {
    left: 18px;
}
.cg-tpl-toggle-on .cg-tpl-toggle-label {
    color: #6cd789;
}
.cg-tpl-toggle:hover .cg-tpl-toggle-track {
    background: rgba(255, 255, 255, 0.2);
}
.cg-tpl-toggle-on:hover .cg-tpl-toggle-track {
    background: rgba(45, 164, 78, 0.7);
}
.cg-tpl-toggle-busy { opacity: 0.55; pointer-events: none; }

/* ---- personedit.php: hero header + grouped sections ---- */
.cg-pe-hero-card { margin-bottom: 16px; }
.cg-pe-hero {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 18px 20px;
}
/* When the hero sits inside an existing card-body (merged-card
   layout), the card-body already provides padding — drop ours. */
.cg-pe-hero-inline { padding: 0; }
.cg-pe-hero-divider {
    margin: 18px 0 22px;
    border: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.cg-pe-hero-avatar {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    background: linear-gradient(135deg, var(--brand-red, #dd443c) 0%, var(--brand-red-dark, #b8362f) 100%);
    color: #fff;
    border: 2px solid rgba(255, 255, 255, 0.14);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.cg-pe-hero-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.cg-pe-hero-initials {
    font-size: 22px;
    font-weight: 700;
    letter-spacing: 0.5px;
    color: #fff;
    line-height: 1;
}
.cg-pe-hero-info { min-width: 0; flex: 1; }
.cg-pe-hero-name {
    color: #fff;
    margin: 0 0 6px;
    font-size: 20px;
    font-weight: 600;
    line-height: 1.2;
    word-break: break-word;
}
.cg-pe-hero-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 6px;
    align-items: center;
}
.cg-pe-hero-title {
    color: rgba(255, 255, 255, 0.55);
    font-size: 12px;
    font-style: italic;
}
.cg-pe-hero-email {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: rgba(255, 255, 255, 0.7);
    font-size: 13px;
    text-decoration: none;
    word-break: break-all;
}
.cg-pe-hero-email i { font-size: 14px; opacity: 0.85; }
.cg-pe-hero-email:hover { color: #fff; text-decoration: underline; }
.cg-pe-hero-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
    flex-shrink: 0;
    margin-left: auto;
}
@media (max-width: 760px) {
    .cg-pe-hero { flex-wrap: wrap; }
    .cg-pe-hero-actions {
        flex-direction: row;
        flex-wrap: wrap;
        margin-left: 0;
        width: 100%;
        justify-content: flex-start;
        padding-top: 4px;
    }
}

/* Form section grouping inside the edit card */
.cg-pe-section { margin-bottom: 22px; padding-bottom: 4px; }
/* Divider lives on the TOP of each section after the first. Uses ~ (general
   sibling) rather than + (adjacent) because personedit slips hidden inputs
   in between sections, breaking adjacency for the Notes section. */
.cg-pe-section ~ .cg-pe-section { border-top: 1px solid rgba(255, 255, 255, 0.06); padding-top: 18px; }
.cg-pe-section-title {
    color: rgba(255, 255, 255, 0.55);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin: 0 0 14px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.cg-pe-section-title i { font-size: 14px; color: var(--brand-red, #dd443c); }

/* Per-user flag chip rows: assigned call types (Sessions card) and
   assigned training categories (Exams card). Filled = on, outlined
   = off. Click to toggle, AJAX-saves via toggle-user-flag.php. */
.cg-pe-chip-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 16px;
    margin: 0 0 16px;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.cg-pe-chip-row-label {
    color: rgba(255, 255, 255, 0.55);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    flex-shrink: 0;
}
.cg-pe-chip-row-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.cg-pe-flag-chip {
    display: inline-flex;
    align-items: center;
    padding: 5px 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    border: 1px solid rgba(255, 255, 255, 0.16);
    background: transparent;
    color: rgba(255, 255, 255, 0.55);
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.12s ease;
}
.cg-pe-flag-chip:hover {
    border-color: rgba(255, 255, 255, 0.36);
    color: rgba(255, 255, 255, 0.85);
}
.cg-pe-flag-chip-on {
    background: var(--brand-red, #dd443c);
    border-color: var(--brand-red, #dd443c);
    color: #fff;
}
.cg-pe-flag-chip-on:hover {
    background: var(--brand-red-dark, #b8362f);
    border-color: var(--brand-red-dark, #b8362f);
    color: #fff;
}
.cg-pe-flag-chip-busy { opacity: 0.55; pointer-events: none; }

/* outstanding_income.php — call-type tile strip across the top
   instead of a tiny side-card. Equal-width tiles, wrap on narrow
   screens. */
.cg-oi-type-strip {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
    margin-bottom: 18px;
}
.cg-oi-type-card {
    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: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    color: inherit;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
}
a.cg-oi-type-card:hover {
    background: linear-gradient(135deg, rgba(255,255,255,0.07), rgba(255,255,255,0.025));
    border-color: rgba(255,255,255,0.18);
    text-decoration: none;
    color: inherit;
}
.cg-oi-type-card-active,
a.cg-oi-type-card.cg-oi-type-card-active:hover {
    border-color: var(--brand-red, #dd443c);
    background: linear-gradient(135deg, rgba(221,68,60,0.18), rgba(221,68,60,0.04));
    box-shadow: 0 0 0 1px var(--brand-red, #dd443c) inset;
}

/* By Coach card head -- title on top, filter form + period stacked
   underneath on the left. Without the length-dropdown chrome the
   table starts immediately below, so a tall right-side filter cluster
   was forcing the card taller than it needed to be. */
.cg-oi-coach-head {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 14px;
}
.cg-oi-coach-head-form {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin: 0;
}
.cg-oi-coach-head-label {
    color: rgba(255, 255, 255, 0.6);
    font-size: 12px;
    margin: 0;
}
.cg-oi-coach-head-select {
    width: 220px;
    min-width: 0;
}
/* Keep the inputs from stretching to 100% inside the flex row -- the
   activity_report.php variant has Person + From + To + Apply + presets
   all on one row, so the date pickers in particular should be just
   wide enough for "05/17/2026". */
.cg-oi-coach-head-form .form-control {
    width: auto;
}
.cg-oi-coach-head-form input[type="date"].form-control {
    width: 150px;
}
.cg-oi-coach-head-period {
    color: rgba(255, 255, 255, 0.55);
    font-size: 12px;
}
/* Variant: period label has been moved into the DataTables top row,
   left col, so it shares a line with the Search input on the right. */
.cg-oi-coach-head-period-inline {
    display: inline-block;
    line-height: 32px;
    vertical-align: middle;
}

/* activity_report.php -- compact filter form that lives inside the
   DataTables top toolbar (Person select + MTD/Last month/Last quarter/
   YTD/Custom + Reset). Sits on the same line as the Search input. */
.cg-ar-filter-form {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin: 0;
}
.cg-ar-filter-form .form-control {
    width: auto;
}
.cg-ar-filter-form .cg-oi-coach-head-select {
    width: 200px;
    /* Native browser select chrome was ignoring border-radius on the
       left side. Force CSS-only rendering with a custom chevron so
       the corners actually round. */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding-right: 28px;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3e%3cpath fill='none' stroke='rgba(255,255,255,0.65)' stroke-width='1.5' d='M1 1l4 4 4-4'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 10px 6px;
}
.cg-ar-custom-wrap {
    position: relative;
}
.cg-ar-custom-pop {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 50;
    background: #1d1d1d;
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 8px;
    padding: 10px 12px;
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    gap: 8px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.45);
    white-space: nowrap;
}
.cg-ar-custom-pop[hidden] { display: none; }
.cg-ar-custom-pop label {
    display: flex;
    flex-direction: column;
    color: rgba(255,255,255,0.65);
    font-size: 11px;
    margin: 0;
    gap: 2px;
}
.cg-ar-custom-pop input[type="date"] {
    width: 150px;
    padding: 4px 8px;
    background: #2a2a2a;
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: 4px;
    color: #fff;
    font-size: 13px;
}

/* Single flex bar that hosts the filter form on the left and the
   DataTables search box on the right, sharing one line above the
   By Person table headers. Replaces Bootstrap's 50/50 col split,
   which was wrapping because the filter side runs wider than 50%. */
.cg-ar-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    width: 100%;
}
/* DataTables wraps its top toolbar in a Bootstrap .row, which has
   negative left/right margins that pushed the dropdown and the
   search input out past the card-body padding so the card's
   rounded-corner overflow:hidden clipped them. Reset margins on
   the row that hosts our toolbar. */
#arCoachTable_wrapper > .row {
    margin-left: 0;
    margin-right: 0;
}
.cg-ar-toolbar .dataTables_filter {
    float: none;
    margin: 0;
    text-align: right;
}
/* DataTables search box is an <input type="search">. macOS/iOS browsers
   apply native rounded search-field chrome that clips our radius on the
   right edge (the clear button area). Force CSS-only rendering. */
.cg-ar-toolbar .dataTables_filter input[type="search"] {
    -webkit-appearance: none;
    appearance: none;
}
.cg-ar-toolbar .dataTables_filter input[type="search"]::-webkit-search-decoration,
.cg-ar-toolbar .dataTables_filter input[type="search"]::-webkit-search-cancel-button,
.cg-ar-toolbar .dataTables_filter input[type="search"]::-webkit-search-results-button,
.cg-ar-toolbar .dataTables_filter input[type="search"]::-webkit-search-results-decoration {
    -webkit-appearance: none;
}

/* Alternating row stripes for the staff + staff_enterprise tables.
   DataTables tags every other row .odd / .even after init; we color
   the odd rows with the same subtle warm tone the rest of the dark
   theme uses for elevated surfaces. */
table#staffTable.dataTable tbody tr.odd {
    background-color: rgba(255, 255, 255, 0.03);
}
table#staffTable.dataTable tbody tr.even {
    background-color: transparent;
}
table#staffTable.dataTable tbody tr:hover {
    background-color: rgba(255, 255, 255, 0.06);
}
.cg-oi-active-type-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: 10px;
    padding: 2px 6px 2px 2px;
    border-radius: 999px;
    text-decoration: none;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.12);
    vertical-align: middle;
    font-size: 12px;
    color: rgba(255,255,255,0.7);
}
.cg-oi-active-type-chip:hover {
    background: rgba(255,255,255,0.08);
    color: #fff;
    text-decoration: none;
}
.cg-oi-type-num {
    color: rgba(255, 255, 255, 0.85);
    font-size: 13px;
    font-weight: 500;
}
.cg-oi-type-sub {
    color: rgba(255, 255, 255, 0.45);
    font-size: 12px;
    font-weight: 400;
}
.cg-oi-type-amt {
    color: #fff;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.1;
}

/* Toast notifications — anchored to top-right, stack vertically.
   Use window.cgToast(message, type) from any page; type can be
   'success' (default), 'error', or omitted. */
.cg-toast-container {
    position: fixed;
    top: 18px;
    right: 18px;
    z-index: 11000;
    display: flex;
    flex-direction: column;
    gap: 10px;
    pointer-events: none;
    max-width: calc(100vw - 36px);
}
.cg-toast {
    pointer-events: auto;
    background: var(--success-green, #2da44e);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 10px;
    padding: 12px 18px 12px 14px;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.4;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.45);
    display: inline-flex;
    align-items: center;
    gap: 10px;
    transform: translateY(-8px);
    opacity: 0;
    transition: transform 0.18s ease, opacity 0.18s ease;
    max-width: 360px;
}
.cg-toast.cg-toast-visible { transform: translateY(0); opacity: 1; }
.cg-toast.cg-toast-error { background: var(--brand-red, #dd443c); }
.cg-toast-icon i { font-size: 18px; color: #fff; }

/* 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;
}

/* ---- Shared sticky save footer ----------------------------------
   Pinned to the bottom of the viewport so the Update button stays
   reachable on long forms (companyedit, personedit). left: 250px
   matches .left-side-menu's fixed width; collapses on mobile.
   Pair with <div class="cg-sticky-spacer"></div> at the end of the
   form so trailing content can scroll past the footer.            */
.cg-sticky-footer {
    position: fixed;
    left: 250px;
    right: 0;
    bottom: 0;
    z-index: 100;
    background: rgba(20, 20, 20, 0.95);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    padding: 12px 24px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 12px;
}
@media (max-width: 768px) { .cg-sticky-footer { left: 0; } }
.cg-sticky-spacer { height: 80px; }

/* Call Costs & Payrates grid inside companyedit's tab-costs pane.
   Default Bootstrap form-control inputs stretch to fill the cell,
   which made the 6+ columns of money fields look crammed and slab-
   like. Constrain each input to a sensible numeric width and add a
   bit of horizontal padding between cells so the row reads as a
   spaced row of small fields. */
.cg-prices-grid td,
.cg-prices-grid th {
    padding-left: 8px;
    padding-right: 8px;
}
.cg-prices-grid input.cg-prices-cell {
    width: 84px;
    max-width: 84px;
    margin: 0 auto;
    padding: 4px 6px;
    text-align: right;
}
.cg-prices-grid input.cg-prices-cell[readonly] {
    opacity: 0.55;
    cursor: not-allowed;
}
/* Auto-save status: subtle border flash so the user sees a save
   landing without having to read every toast. */
.cg-prices-saving { border-color: rgba(245, 166, 35, 0.55) !important; }
.cg-prices-saved {
    border-color: rgba(45, 164, 78, 0.55) !important;
    transition: border-color 0.4s ease;
}

/* Sticky footer "auto-save" hint: more visible than gray micro-text
   so users notice it the first time they look down for a Save button. */
.cg-autosave-hint {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: 999px;
    background: rgba(45, 164, 78, 0.14);
    color: #b4eba6;
    border: 1px solid rgba(45, 164, 78, 0.36);
    font-size: 14px;
    font-weight: 500;
}
.cg-autosave-hint .mdi { font-size: 17px; }

/* Destructive-action confirm card (deletesessionconfirm.php and any
   future "are you sure?" pages). Soft red wash on the warning banner,
   neat label/value grid for the metadata, primary Cancel + danger
   Delete buttons separated for safety. */
.cg-confirm-banner {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    background: rgba(221, 68, 60, 0.10);
    border: 1px solid rgba(221, 68, 60, 0.35);
    color: #ffc4be;
    border-radius: 10px;
    padding: 12px 16px;
    margin-bottom: 18px;
    font-size: 13px;
    line-height: 1.4;
}
.cg-confirm-banner .mdi {
    font-size: 22px;
    color: var(--brand-red, #dd443c);
    flex-shrink: 0;
    margin-top: 1px;
}
.cg-confirm-banner strong { color: #fff; }
.cg-confirm-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 12px 24px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 10px;
    padding: 16px 20px;
    margin-bottom: 22px;
}
.cg-confirm-field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.cg-confirm-label {
    color: rgba(255, 255, 255, 0.55);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.cg-confirm-value {
    color: #fff;
    font-size: 14px;
    font-weight: 500;
    word-break: break-word;
}
.cg-confirm-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
}
.cg-confirm-danger-btn {
    background: var(--brand-red, #dd443c);
    border: 1px solid var(--brand-red, #dd443c);
    color: #fff;
}
.cg-confirm-danger-btn:hover,
.cg-confirm-danger-btn:focus {
    background: #b32424;
    border-color: #b32424;
    color: #fff;
    text-decoration: none;
}
.cg-confirm-empty {
    text-align: center;
    padding: 32px 16px;
}