/* Fonts — swap to self-hosted @font-face for production (see CLAUDE.md) */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* Primary blue ramp (anchor #4265AF) */
  --es-blue-900: #293F6D;  --es-blue-850: #33497D;  --es-blue-800: #4265AF;  --es-blue-700: #4B72C6;  --es-blue-600: #5481E0;
  --es-blue-tint: #E7ECF6;
  /* Aqua (secondary accent / info) */
  --es-aqua-700: #0673A1;  --es-aqua-600: #0098D4;  --es-aqua-500: #00AEEF;  --es-aqua-400: #1BB8F1;  --es-aqua-50: #DFF4FC;
  /* Status */
  --es-orange-600:#C14800; --es-orange-500:#FA650D; --es-orange-50:#FEE8D8;
  --es-red-700:#A01010;    --es-red-500:#DE1F1F;    --es-red-50:#FDDCDC;
  --es-yellow-700:#9A6200; --es-yellow-500:#FCA833; --es-yellow-50:#FEF4DC;
  --es-green-700:#09630B;  --es-green-500:#27AC2A;  --es-green-50:#D6F5D6;
  --es-hr-leave-700:#8A0077; --es-hr-leave:#B4009E; --es-hr-leave-50:#F9E3F5;
  /* The one frame drawn in black: it fences Team leave's Cover row off from the people above it,
     and navy read as one more shade of the chrome it sits in. Scoped to that row and nothing else. */
  --es-hr-cover-frame:#000000;
  --es-devcard-ink:#000000;
  /* Neutrals */
  --es-white:#FFFFFF; --es-grey-50:#F1F2F7; --es-grey-100:#E1E6EB; --es-grey-300:#C7CCD4;
  --es-grey-400:#9F9F9F; --es-grey-600:#6B6B6B; --es-grey-700:#4D4D4D;
  --es-row-stripe: color-mix(in srgb, var(--es-grey-50) 50%, #fff);
  /* Semantic */
  --es-accent: var(--es-blue-800);  --es-accent-hover: var(--es-blue-700);  --es-accent-press:#34528C;
  /* muted TEXT must clear WCAG AA (4.5:1); grey-400 (#9F9F9F ~2.6:1) fails, so
     map to grey-600 (#6B6B6B ~5.3:1). grey-400 stays for icons/borders/placeholders. */
  --es-text-strong: var(--es-blue-900);  --es-text-body: var(--es-grey-700);  --es-text-muted: var(--es-grey-600);
  --es-border-subtle: rgba(10,26,47,.10);  --es-border-input: var(--es-grey-100);
  --es-focus-ring: 0 0 0 3px rgba(66,101,175,.30);
  /* Shadows */
  --es-shadow-sm: 0 1px 3px rgba(10,26,47,.08), 0 1px 2px rgba(10,26,47,.04);
  --es-shadow-md: 0 4px 12px rgba(10,26,47,.10);
  --es-shadow-lg: 0 12px 28px rgba(10,26,47,.14);
  /* Motion */
  --es-ease: cubic-bezier(.2,0,0,1);  --es-dur: .12s;
  --es-font-sans: 'Poppins','Segoe UI',system-ui,-apple-system,sans-serif;
  --es-font-mono: 'JetBrains Mono',ui-monospace,'SFMono-Regular',Menlo,monospace;

  /* ---- Re-point Bootstrap's own variables to eSuite ---- */
  --bs-body-font-family: var(--es-font-sans);
  --bs-body-font-size: .9375rem;          /* 15px */
  --bs-body-color: var(--es-text-body);
  --bs-body-bg: var(--es-grey-50);        /* light-grey page */
  --bs-emphasis-color: var(--es-text-strong);
  --bs-secondary-color: var(--es-text-muted);
  --bs-primary: var(--es-blue-800);
  --bs-primary-rgb: 66,101,175;
  --bs-link-color: var(--es-blue-800);
  --bs-link-color-rgb: 66,101,175;
  --bs-link-hover-color: var(--es-accent-press);
  --bs-border-color: var(--es-grey-100);
  --bs-border-radius: .375rem;            /* 6px  controls */
  --bs-border-radius-sm: .25rem;          /* 4px  */
  --bs-border-radius-lg: .625rem;         /* 10px cards/nav */
  --bs-border-radius-xl: .875rem;         /* 14px panels */
  --bs-border-radius-pill: 999px;
  --bs-box-shadow-sm: var(--es-shadow-sm);
  --bs-box-shadow: var(--es-shadow-md);
  --bs-box-shadow-lg: var(--es-shadow-lg);
}

body { font-family: var(--es-font-sans); }
h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6 { color: var(--es-text-strong); font-weight: 600; }
/* Pop-up (modal) headers are coloured chrome — keep their title text white (headings default to navy above). */
.modal-header.bg-navy,.modal-header.bg-orange,.modal-header.bg-danger,
.modal-header.bg-navy .modal-title,.modal-header.bg-orange .modal-title,.modal-header.bg-danger .modal-title,
.modal-header.bg-navy h1,.modal-header.bg-navy h2,.modal-header.bg-navy h3,.modal-header.bg-navy h4,.modal-header.bg-navy h5,.modal-header.bg-navy h6 { color:#fff !important; }
.h1,h1{font-size:2rem}.h2,h2{font-size:1.5rem}.h3,h3{font-size:1.1875rem}
.h4,h4{font-size:.9375rem}.display-1,.es-display{font-size:2.75rem;font-weight:600}
a { text-decoration: none; }
a:hover { text-decoration: underline; }

/* Brand wordmark — blue text, orange 2nd character */
.es-wordmark{font-weight:600;color:var(--es-blue-800);letter-spacing:-.01em}
.es-wordmark .e{font-weight:500}
.es-wordmark .o{color:var(--es-orange-500)}
.bg-navy .es-wordmark,.es-wordmark.on-navy{color:#fff}

/* Helpers */
.hide{display:none!important}
.text-navy{color:var(--es-blue-900)!important}
.text-aqua{color:var(--es-aqua-500)!important}
.text-muted-es{color:var(--es-text-muted)!important}
.bg-navy{background:var(--es-blue-800)!important;color:#fff}
.bg-blue-tint{background:var(--es-blue-tint)!important}
.font-mono{font-family:var(--es-font-mono)!important}
.es-eyebrow{font-size:.6875rem;font-weight:600;text-transform:uppercase;letter-spacing:.12em;color:var(--es-aqua-700)}
/* A question mark that carries its explanation in title=. Focusable, so it is reachable without a
   mouse -- a tooltip only a hover can open is help that a keyboard user does not have. */
.es-help-mark{display:inline-flex;align-items:center;justify-content:center;width:1.15em;height:1.15em;
  margin-left:.4em;border-radius:50%;border:1px solid currentColor;font-size:.75rem;font-weight:700;
  line-height:1;cursor:help;opacity:.75;vertical-align:middle}
.es-help-mark:hover,.es-help-mark:focus{opacity:1}
.es-doc-chip{display:inline-flex;align-items:center;gap:.4em;padding:.35em .7em;border-radius:7px;background:var(--es-green-50);color:var(--es-green-700);font-size:.8125rem;font-weight:600;text-decoration:none;transition:opacity .12s cubic-bezier(.2,0,0,1)}
.es-doc-chip:hover{opacity:.86;color:var(--es-green-700)}

.btn{--bs-btn-font-family:var(--es-font-sans);--bs-btn-font-weight:600;
  --bs-btn-border-radius:.375rem;--bs-btn-font-size:.8125rem;
  --bs-btn-padding-y:.5625rem;--bs-btn-padding-x:1.125rem;line-height:1.2;
  transition:opacity var(--es-dur) var(--es-ease),background var(--es-dur) var(--es-ease),transform var(--es-dur) var(--es-ease)}
.btn:hover{opacity:.86}
.btn:focus-visible{box-shadow:var(--es-focus-ring)}
.btn:active{transform:scale(.97)}
.btn-sm{--bs-btn-padding-y:.3125rem;--bs-btn-padding-x:.75rem;--bs-btn-font-size:.6875rem}

/* Primary = brand blue */
.btn-primary{--bs-btn-bg:var(--es-blue-800);--bs-btn-border-color:var(--es-blue-800);
  --bs-btn-hover-bg:var(--es-blue-800);--bs-btn-hover-border-color:var(--es-blue-800);
  --bs-btn-active-bg:var(--es-accent-press);--bs-btn-active-border-color:var(--es-accent-press);--bs-btn-color:#fff}
.btn-aqua,.btn-info{--bs-btn-bg:var(--es-aqua-700);--bs-btn-border-color:var(--es-aqua-700);
  --bs-btn-hover-bg:var(--es-aqua-700);--bs-btn-hover-border-color:var(--es-aqua-700);
  --bs-btn-active-bg:var(--es-aqua-700);--bs-btn-color:#fff;--bs-btn-hover-color:#fff}
/* Navy/deep */
.btn-navy{--bs-btn-bg:var(--es-blue-900);--bs-btn-border-color:var(--es-blue-900);
  --bs-btn-hover-bg:var(--es-blue-900);--bs-btn-color:#fff;--bs-btn-hover-color:#fff}
/* Orange (Add / create) */
.btn-orange,.btn-warning{--bs-btn-bg:var(--es-orange-500);--bs-btn-border-color:var(--es-orange-500);
  --bs-btn-hover-bg:var(--es-orange-500);--bs-btn-color:#fff;--bs-btn-hover-color:#fff;--bs-btn-active-bg:var(--es-orange-600)}
/* Danger */
.btn-danger{--bs-btn-bg:var(--es-red-500);--bs-btn-border-color:var(--es-red-500);--bs-btn-hover-bg:var(--es-red-500);--bs-btn-color:#fff;--bs-btn-hover-color:#fff;--bs-btn-active-bg:var(--es-red-700)}
.btn-green{--bs-btn-bg:var(--es-green-700);--bs-btn-border-color:var(--es-green-700);
  --bs-btn-hover-bg:var(--es-green-700);--bs-btn-hover-border-color:var(--es-green-700);
  --bs-btn-active-bg:var(--es-green-700);--bs-btn-color:#fff;--bs-btn-hover-color:#fff}
.btn-navy:disabled,.btn-navy.disabled,
.btn-orange:disabled,.btn-orange.disabled,
.btn-danger:disabled,.btn-danger.disabled,
.btn-green:disabled,.btn-green.disabled,
.btn-aqua:disabled,.btn-aqua.disabled{
  --bs-btn-disabled-bg:var(--es-grey-100,#E1E6EB);
  --bs-btn-disabled-border-color:var(--es-grey-100,#E1E6EB);
  --bs-btn-disabled-color:var(--es-grey-700,#4D4D4D);
  cursor:not-allowed}
/* Outline (1.5px) + Ghost */
.btn-outline-primary{--bs-btn-color:var(--es-aqua-600);--bs-btn-border-color:var(--es-aqua-500);--bs-btn-border-width:1.5px;
  --bs-btn-hover-bg:var(--es-aqua-500);--bs-btn-hover-border-color:var(--es-aqua-500);--bs-btn-hover-color:#fff}
.btn-ghost{--bs-btn-bg:var(--es-grey-50);--bs-btn-color:var(--es-grey-700);--bs-btn-border-color:var(--es-grey-300);
  --bs-btn-border-width:1.5px;--bs-btn-hover-bg:var(--es-grey-100);--bs-btn-hover-color:var(--es-blue-900);--bs-btn-hover-border-color:var(--es-grey-400)}
/* Low-emphasis "Change a completed/verified row" action — ghost button with aqua-700 text (§6.4d) */
.btn-ghost-aqua{--bs-btn-color:var(--es-aqua-700,#0673A1);--bs-btn-hover-color:var(--es-aqua-700,#0673A1)}
/* Icon button: white icons at rest, flip to orange on hover/focus (e.g. the navy "View learner" action) */
.btn.es-btn-icon-hover [class*="fa-"]{color:#fff;transition:color .12s}
.btn.es-btn-icon-hover:hover [class*="fa-"],
.btn.es-btn-icon-hover:focus-visible [class*="fa-"]{color:var(--es-orange-500,#FA650D)}

.badge{font-family:var(--es-font-sans);font-weight:600;font-size:.6875rem;padding:.25rem .625rem;border-radius:999px}
.badge-soft-blue  {background:var(--es-blue-tint);color:var(--es-blue-800)}
.badge-soft-aqua  {background:var(--es-aqua-50);color:var(--es-aqua-600)}
.badge-soft-orange{background:var(--es-orange-50);color:var(--es-orange-600)}
.badge-soft-red   {background:var(--es-red-50);color:var(--es-red-700)}
.badge-soft-green {background:var(--es-green-50);color:var(--es-green-700)}
.badge-soft-yellow{background:var(--es-yellow-50);color:var(--es-yellow-700)}
.badge-soft-grey  {background:var(--es-grey-50);color:var(--es-grey-700)}
.badge .es-dot{width:6px;height:6px;border-radius:50%;background:currentColor;display:inline-block;margin-right:2px}

.nav-pills{--bs-nav-pills-link-active-bg:var(--es-blue-800);gap:4px}
.nav-pills .nav-link,.nav-pills>li>a{border-radius:999px;color:var(--es-blue-800)}
.nav-pills .nav-link.active,.nav-pills>li.active>a{background-color:var(--es-blue-800)!important;color:#fff!important}
.nav-pills .nav-link:not(.active):hover,.nav-pills>li:not(.active)>a:hover{background-color:var(--es-grey-50)}
.nav-pills>li.active{cursor:default}

.card{--bs-card-border-radius:.625rem;--bs-card-border-color:var(--es-border-subtle);
  --bs-card-bg:var(--es-white);--bs-card-inner-border-radius:.625rem;border-width:.5px;overflow:hidden}
.card-header{font-weight:600;font-size:.8125rem;color:#fff;border-bottom:none;
  display:flex;align-items:center;justify-content:space-between;gap:.5rem;padding:.625rem 1rem}
.card-header.bg-navy  {background:var(--es-blue-800)}
.card-header.bg-aqua  {background:var(--es-aqua-500)}
.card-header.bg-orange{background:var(--es-orange-500)}
.card-header.bg-navy a:not(.btn),.card-header.bg-aqua a:not(.btn),.card-header.bg-orange a:not(.btn),
.card-header.bg-navy a:not(.btn):hover,.card-header.bg-aqua a:not(.btn):hover,.card-header.bg-orange a:not(.btn):hover{color:#fff}
.card-body{color:var(--es-text-body);font-size:.8125rem}
/* A card that opens. The whole header bar is the control, following .es-alert-group (6b). */
details.card > summary.card-header{cursor:pointer;list-style:none;user-select:none}
details.card > summary.card-header::-webkit-details-marker{display:none}
details.card > summary.card-header:focus-visible{outline:none;box-shadow:inset 0 0 0 3px var(--es-focus-ring)}
.es-card-caret{font-size:.6875rem;transition:transform .14s cubic-bezier(.2,0,0,1)}
details.card[open] > summary.card-header .es-card-caret{transform:rotate(90deg)}
.organisation_search_container{position:relative}

.list-group:not(.lhs):not(.lhs-sub){
  --bs-list-group-bg: var(--es-white);
  --bs-list-group-border-color: var(--es-border-subtle);
  --bs-list-group-border-radius: .625rem;     /* 10px shell, not the 6px control radius */
  border-radius:.625rem; overflow:hidden;
}
.list-group:not(.lhs):not(.lhs-sub) > .list-group-item{
  background: var(--es-white);
  border:0; border-bottom:.5px solid var(--es-grey-100);
  padding:.75rem .9375rem; color:var(--es-text-body);
}
.list-group:not(.lhs):not(.lhs-sub) > .list-group-item:last-child{ border-bottom:0; }
.list-group:not(.lhs):not(.lhs-sub) > .list-group-item:hover{ background:var(--es-grey-50); }

.table       { --bs-table-bg: var(--es-white); --bs-table-striped-bg: var(--es-row-stripe); }
.dropdown-menu{ --bs-dropdown-bg: var(--es-white); }
.modal       { --bs-modal-bg: var(--es-white); }
.accordion   { --bs-accordion-bg: var(--es-white); }
.pagination  { --bs-pagination-bg: var(--es-white); }
.popover     { --bs-popover-bg: var(--es-white); }
.offcanvas   { --bs-offcanvas-bg: var(--es-white); }
.nav-tabs    { --bs-nav-tabs-link-active-bg: var(--es-white); }
.form-check-input{ --bs-form-check-bg: var(--es-white); }

.form-label{font-size:.6875rem;font-weight:600;color:var(--es-text-body);margin-bottom:.3125rem}
.form-control,.form-select{font-family:var(--es-font-sans);font-size:.8125rem;color:var(--es-text-body);
  border:1.5px solid var(--es-border-input);border-radius:.375rem;padding:.5625rem .75rem;background:#fff}
.form-control:focus,.form-select:focus{border-color:var(--es-blue-800);box-shadow:var(--es-focus-ring)}
.form-control.width-auto,.form-select.width-auto{display:inline-block;width:auto!important}
/* An .es-ribbon divider orphaned at the start/end of a wrapped 2nd tier is hidden by init.js (esRibbonCollapseDividers). */
.es-ribbon-divider--wrapped{display:none!important}
.es-ribbon .ribbonItemSelected,.es-ribbon-tab .ribbonItemSelected{display:none!important}
.form-control.is-invalid{border-color:var(--es-red-500)}
.form-text{font-size:.625rem;color:var(--es-text-muted)}
.form-check-input{width:1rem;height:1rem;border:1.5px solid var(--es-grey-300);accent-color:var(--es-accent)}
.form-check-input:checked{background-color:var(--es-accent);border-color:var(--es-accent)}
.form-check-input:focus{box-shadow:var(--es-focus-ring)}
.form-check-label{font-size:.8125rem;color:var(--es-text-body)}

.alert{font-size:.8125rem;line-height:1.3;border:none;border-left:4px solid;border-radius:.5rem;
  padding:.75rem 1rem;display:flex;gap:.625rem;align-items:flex-start;overflow-wrap:break-word;word-break:break-word}
/* Flex children must be allowed to shrink below their content width, or long text/tokens
   overflow the alert in a narrow column (e.g. a col-lg-2 sidebar). Icon keeps flex-shrink:0. */
.alert>*{min-width:0}
.alert>.es-alert-icon{font-size:1rem;flex-shrink:0;margin-top:2px}
.alert-info   {background:var(--es-aqua-50);border-left-color:var(--es-aqua-500);color:#006A8E}
.alert-warning{background:var(--es-yellow-50);border-left-color:var(--es-yellow-500);color:var(--es-yellow-700)}
.alert-danger {background:var(--es-red-50);border-left-color:var(--es-red-500);color:var(--es-red-700)}
.alert-success{background:var(--es-green-50);border-left-color:var(--es-green-500);color:var(--es-green-700)}

/* --- 6b. ALERT GROUP — one collapsible "Alerts" segment above a screen's content ------------ */
.es-alert-group{background:var(--es-white);border:1px solid var(--es-grey-100);border-radius:.625rem;
  margin-bottom:1rem;overflow:hidden}
.es-alert-group-head{display:flex;align-items:center;gap:.5rem;padding:.625rem .875rem;cursor:pointer;
  list-style:none;user-select:none;font-size:.8125rem;color:var(--es-blue-900);
  transition:background .14s cubic-bezier(.2,0,0,1)}
.es-alert-group-head::-webkit-details-marker{display:none}   /* the native triangle; we draw our own */
.es-alert-group-head:hover{background:var(--es-grey-50)}
.es-alert-group-head:focus-visible{outline:none;box-shadow:inset 0 0 0 3px var(--es-focus-ring)}
.es-alert-group-title{font-weight:600}
.es-alert-group-count{color:var(--es-grey-400);font-size:.6875rem}
.es-alert-group-dot{width:8px;height:8px;border-radius:999px;flex-shrink:0;background:var(--es-aqua-500)}
.es-alert-group-dot.tone-danger {background:var(--es-red-500)}
.es-alert-group-dot.tone-warning{background:var(--es-yellow-500)}
.es-alert-group-dot.tone-success{background:var(--es-green-500)}
.es-alert-group-dot.tone-info   {background:var(--es-aqua-500)}
/* The chevron sits hard right and turns to point at the content it has opened. */
.es-alert-group-chevron{margin-left:auto;color:var(--es-grey-400);font-size:.75rem;
  transition:transform .14s cubic-bezier(.2,0,0,1)}
.es-alert-group[open] .es-alert-group-chevron{transform:rotate(180deg)}
.es-alert-group-body{padding:0 .875rem .875rem;display:flex;flex-direction:column;gap:.5rem}
.es-alert-group-body .alert{margin-bottom:0}

/* --- 6c. PRODUCT TIMELINE — contract bars on a shared time axis (account overview) ----------
   Hand-built inline SVG, computed server-side; this file only styles the frame. */
.es-timeline-scroll{overflow-x:auto;padding:4px 0}
.es-product-timeline{min-width:560px;display:block}
.es-timeline-key{display:flex;flex-wrap:wrap;gap:14px;margin-top:8px;font-size:.6875rem;
  color:var(--es-grey-700)}
.es-timeline-key span{display:inline-flex;align-items:center;gap:5px}
.es-timeline-key i{width:10px;height:10px;border-radius:999px;display:inline-block;opacity:.85}

.es-progress-label{display:flex;justify-content:space-between;font-size:.6875rem;color:var(--es-text-body);margin-bottom:4px}
.es-progress-label .val{font-weight:600}
.progress{height:10px;background:var(--es-grey-100);border-radius:999px}
.progress-bar{border-radius:999px;transition:width .3s var(--es-ease)}
.progress-bar.tone-aqua{background:var(--es-aqua-500)}.es-progress-label.tone-aqua .val{color:var(--es-aqua-500)}
.progress-bar.tone-green{background:var(--es-green-500)}.es-progress-label.tone-green .val{color:var(--es-green-500)}
.progress-bar.tone-orange{background:var(--es-orange-500)}.es-progress-label.tone-orange .val{color:var(--es-orange-500)}
.progress-bar.tone-red{background:var(--es-red-500)}.es-progress-label.tone-red .val{color:var(--es-red-500)}
.progress-bar.tone-blue{background:var(--es-blue-800)}.es-progress-label.tone-blue .val{color:var(--es-blue-800)}
.progress-bar.tone-yellow{background:var(--es-yellow-500)}.es-progress-label.tone-yellow .val{color:var(--es-yellow-700)}

.es-table-wrap{background:#fff;border:.5px solid var(--es-border-subtle);border-radius:10px;overflow:hidden;
  font-family:var(--es-font-sans)}
.es-table-scroll{overflow-x:auto}

.es-table{width:100%;border-collapse:collapse;font-size:13.5px;color:var(--es-grey-700);margin:0}

/* Header — navy bar, white text */
.es-table>thead>tr>th{background:var(--es-blue-900,#293F6D);color:#fff;font-weight:600;font-size:13px;
  text-align:left;padding:9px 14px;white-space:nowrap;vertical-align:middle;position:sticky;top:0;z-index:1}
.es-table.head-orange>thead>tr>th{background:var(--es-orange-500)}
.es-th{display:inline-flex;align-items:center;gap:4px}
.es-th-label{display:inline-flex;align-items:center;gap:7px;background:none;border:0;padding:0;margin:0;
  cursor:pointer;color:#fff;font:600 13px var(--es-font-sans)}
.es-th-label>i{font-size:10px;color:rgba(255,255,255,.55);transition:color .12s}
.es-th-label:hover>i{color:#fff}
/* Funnel */
.es-th-funnel{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:4px;
  border:0;padding:0;margin-left:2px;cursor:pointer;font-size:10px;background:transparent;
  color:rgba(255,255,255,.62);transition:background .12s,color .12s}
.es-th-funnel:hover{color:#fff}
.es-th-funnel.is-active{color:var(--es-aqua-400,#1BB8F1);background:rgba(255,255,255,.2)}
.es-th-funnel:focus-visible{outline:2px solid #fff;outline-offset:1px}

/* Body — striped + aqua hover */
.es-table>tbody>tr{transition:background .12s;cursor:pointer}
.es-table>tbody>tr:nth-child(even){background:var(--es-row-stripe)}
.es-table>tbody>tr:hover{background:var(--es-aqua-50,#DFF4FC)}
.es-table>tbody>tr>td{padding:9px 14px;border-bottom:.5px solid var(--es-border-subtle);white-space:nowrap}
.es-table td.mono,.es-table .mono{font-family:var(--es-font-mono);font-size:12.5px}
.es-table td.strong,.es-table .strong{font-weight:600;color:var(--es-blue-900,#293F6D)}
.es-table a{color:var(--es-aqua-700,#0673A1);text-decoration:none}
.es-table a:hover{text-decoration:underline}
/* Buttons embedded in a cell are not links — never underline them (the gap between icons was showing as a stray "_") */
.es-table a.btn,.es-table a.btn:hover,.es-table a.btn:focus{text-decoration:none}
.es-table a.btn{color:var(--bs-btn-color)}

/* Auto-fit — equal-width columns that truncate (ellipsis) so the table fits the viewport (opt-in via Table "autoFit") */
.es-table.es-table-fit{table-layout:fixed}
.es-table.es-table-fit>thead>tr>th,.es-table.es-table-fit>tbody>tr>td{overflow:hidden;text-overflow:ellipsis}
.es-table.es-table-fit>thead>tr>th .es-th{max-width:100%}
.es-table.es-table-fit>thead>tr>th .es-th-label{min-width:0;overflow:hidden;text-overflow:ellipsis}

/* Column sizing — drag a heading's right-hand edge; esuite-table.js pins the widths it measures.
   The grip sits inside the th, so the th has to be the positioning context. */
.es-table>thead>tr>th{position:relative}
.es-col-grip{position:absolute;top:0;right:0;width:9px;height:100%;cursor:col-resize;touch-action:none;
  -webkit-user-select:none;user-select:none}
.es-col-grip::after{content:"";position:absolute;top:22%;right:4px;width:1px;height:56%;
  background:rgba(255,255,255,.28);transition:background .12s,width .12s}
.es-col-grip:hover::after{background:var(--es-aqua-400,#1BB8F1);width:2px}
.es-col-grip:focus-visible{outline:2px solid #fff;outline-offset:-2px;border-radius:2px}
.es-table.es-resizing{-webkit-user-select:none;user-select:none;cursor:col-resize}
.es-table.es-resizing .es-col-grip::after{background:var(--es-aqua-400,#1BB8F1);width:2px}
/* Pinned widths only hold under a fixed layout, so anything too long is clipped rather than pushing out. */
.es-table.es-table-sized{table-layout:fixed}
.es-table.es-table-sized>thead>tr>th,.es-table.es-table-sized>tbody>tr>td{overflow:hidden;text-overflow:ellipsis}
.es-table.es-table-sized>thead>tr>th .es-th{max-width:100%}
.es-table.es-table-sized>thead>tr>th .es-th-label{min-width:0;overflow:hidden;text-overflow:ellipsis}

/* Dev board — the stages side by side, one column each, cards inside. */
.es-kanban{display:flex;align-items:flex-start;gap:12px;overflow-x:auto;padding-bottom:6px}
.es-kanban-col{flex:1 1 0;min-width:232px;display:flex;flex-direction:column;
  background:var(--es-grey-50);border-radius:8px}
/* The same left inset as the body, so the heading lines up with the card boxes under it. */
.es-kanban-head{display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:9px 8px 5px}
.es-kanban-name{font:600 10px var(--es-font-sans);letter-spacing:.09em;text-transform:uppercase;
  color:var(--es-grey-600)}
.es-kanban-head .badge{font-size:10px;font-weight:600}
.es-kanban-body{display:flex;flex-direction:column;gap:6px;padding:0 8px 8px}
/* --es-devcard-ink is #000: a hard black box round every card turns a column into a
   wireframe. Subtle border and a shadow on hover, exactly as the lanes now do. */
.es-kanban-card{display:block;padding:8px 10px;background:var(--es-white);border-radius:6px;
  border:1px solid var(--es-border-subtle);text-decoration:none;
  transition:box-shadow .12s,transform .12s}
.es-kanban-card:hover,.es-kanban-card:focus-visible{box-shadow:0 2px 8px rgba(41,63,109,.10);
  transform:translateY(-1px);text-decoration:none}
.es-kanban-title{display:block;font:600 12.5px/1.3 var(--es-font-sans);
  color:var(--es-blue-900);margin-bottom:4px}
.es-kanban-tags{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:4px}
.es-kanban-meta{display:block;font-size:11.5px;color:var(--es-grey-600)}
.es-kanban-meta .text-muted{color:var(--es-grey-600)}
.es-kanban-empty{font-size:12px;color:var(--es-grey-600)}
:root{
  --es-tint-slate:#EEF1F6; --es-tint-blue:#E6ECF8; --es-tint-aqua:#DFF4FC;
  --es-tint-teal:#DDF3EF; --es-tint-mint:#D6F5D6; --es-tint-lime:#EEF6DC;
  --es-tint-sand:#FBF1DA; --es-tint-gold:#FEF4DC; --es-tint-peach:#FEE8D8;
  --es-tint-blush:#FDDCDC; --es-tint-rose:#FAE3EE; --es-tint-lilac:#EFE7F8;
}
.es-tint-slate{--es-tint:var(--es-tint-slate)}
.es-tint-blue{--es-tint:var(--es-tint-blue)}
.es-tint-aqua{--es-tint:var(--es-tint-aqua)}
.es-tint-teal{--es-tint:var(--es-tint-teal)}
.es-tint-mint{--es-tint:var(--es-tint-mint)}
.es-tint-lime{--es-tint:var(--es-tint-lime)}
.es-tint-sand{--es-tint:var(--es-tint-sand)}
.es-tint-gold{--es-tint:var(--es-tint-gold)}
.es-tint-peach{--es-tint:var(--es-tint-peach)}
.es-tint-blush{--es-tint:var(--es-tint-blush)}
.es-tint-rose{--es-tint:var(--es-tint-rose)}
.es-tint-lilac{--es-tint:var(--es-tint-lilac)}
[class*="es-tint-"]{background:var(--es-tint)}
/* A tinted row has to outrank the stripe, which is a more specific selector than a class. */
.es-table>tbody>tr[class*="es-tint-"],
.es-table>tbody>tr[class*="es-tint-"]:nth-child(even){background:var(--es-tint)}
.es-table>tbody>tr[class*="es-tint-"]>td{background:transparent}
/* Hover darkens the tint rather than replacing it, so the colour survives the pointer. */
.es-table>tbody>tr[class*="es-tint-"]:hover{background:var(--es-tint)}
.es-table>tbody>tr[class*="es-tint-"]:hover>td{background:rgba(0,0,0,.045)}
/* Colour picker — the choice is made by looking, so the control is the colours themselves. */
.es-colourpick{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:2px}
.es-colourpick-option{position:relative;display:inline-flex;margin:0;cursor:pointer}
.es-colourpick-option input{position:absolute;width:1px;height:1px;opacity:0;margin:0}
.es-colourpick-swatch{display:block;width:26px;height:26px;border-radius:6px;
  border:1px solid var(--es-devcard-ink);transition:transform .12s,box-shadow .12s}
.es-colourpick-option:hover .es-colourpick-swatch{transform:translateY(-1px)}
.es-colourpick-option input:checked+.es-colourpick-swatch{
  box-shadow:0 0 0 2px var(--es-white),0 0 0 4px var(--es-blue-800)}
.es-colourpick-option input:focus-visible+.es-colourpick-swatch{box-shadow:var(--es-focus-ring)}
/* No colour at all, said in the same shape as the twelve that are. */
.es-colourpick-none{background:var(--es-white);background-image:linear-gradient(45deg,
  transparent 44%,var(--es-grey-400) 44%,var(--es-grey-400) 56%,transparent 56%)}
/* A swatch beside each colour in a picker, so the name is not the only clue. */
.es-swatch{display:inline-block;width:14px;height:14px;border-radius:4px;vertical-align:-2px;
  margin-right:6px;border:.5px solid var(--es-border-subtle)}

/* Dragging a card: only the stages it may legally reach light up. */
.es-kanban-card{cursor:grab}
/* A board whose cards are opened rather than dragged. Without this the grab cursor promises a
   drag that does nothing, and a task moves with a note attached -- which a drag cannot collect. */
.es-kanban-static .es-kanban-card{cursor:pointer}
.es-kanban-card.is-dragging{opacity:.5;cursor:grabbing}
.es-kanban-col.is-drop-target{border-color:var(--es-orange-500,#FA650D);border-style:dashed}
.es-kanban-col.is-drop-over{background:var(--es-orange-50,#FEE8D8)}

.es-kanban-kind{display:flex;flex-wrap:wrap;align-items:center;gap:4px;margin-bottom:4px}
.es-kanban-project{font-size:11px;letter-spacing:.04em;color:var(--es-grey-600);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Said in the column, before anybody drags into it. It warns; it never refuses. */
.es-kanban-full{font-size:11.5px;line-height:1.35;color:var(--es-red-700);
  background:var(--es-red-50,#FDDCDC);border-radius:6px;padding:7px 9px}

/* All projects — one swimlane per board, four normalised columns.
   A grid rather than a table: the lanes have to line up across boards with completely different
   stage names, and that alignment IS the screen.

   NOTHING IN HERE USES --es-devcard-ink. That token is #000 and the project boards use it
   deliberately; at lane density a black border on every card and black text on every meta line
   turns the grid into a wireframe. Borders are --es-border-subtle, meta text is --es-grey-600
   (5.3:1 on the grey-50 cell). */
.es-lanes{display:flex;flex-direction:column;gap:8px;overflow-x:auto}
.es-lane{display:grid;grid-template-columns:230px repeat(4,minmax(0,1fr));gap:8px;
  align-items:start;min-width:900px}
.es-lane--head{position:sticky;top:0;z-index:1;background:var(--es-white);padding-bottom:2px}
/* Plain labels: a heading in a grey box reads as a cell with nothing in it. */
.es-lane-col{font:600 10px var(--es-font-sans);letter-spacing:.09em;text-transform:uppercase;
  color:var(--es-grey-600);padding:0 4px 4px}

/* The lane header. A rail rather than a border: it says what kind of board this is before the
   name is read, and costs 3px instead of a box. */
.es-lane-head{display:flex;flex-direction:column;gap:2px;padding:10px 11px;
  background:var(--es-grey-50);border-radius:8px;border-left:3px solid var(--es-blue-800)}
.es-lane-head.is-system{border-left-color:var(--es-blue-800)}
.es-lane-head.is-quiet{border-left-color:var(--es-grey-300)}
.es-lane-head.es-rail-slate{border-left-color:#7A8699}
.es-lane-head.es-rail-blue {border-left-color:var(--es-blue-800)}
.es-lane-head.es-rail-aqua {border-left-color:var(--es-aqua-700)}
.es-lane-head.es-rail-teal {border-left-color:#1E8073}
.es-lane-head.es-rail-mint {border-left-color:var(--es-green-500)}
.es-lane-head.es-rail-lime {border-left-color:#6E8C1F}
.es-lane-head.es-rail-sand {border-left-color:#9A7B2E}
.es-lane-head.es-rail-gold {border-left-color:#9C7A16}
.es-lane-head.es-rail-peach{border-left-color:var(--es-orange-600)}
.es-lane-head.es-rail-blush{border-left-color:var(--es-red-500)}
.es-lane-head.es-rail-rose {border-left-color:#A8347A}
.es-lane-head.es-rail-lilac{border-left-color:#6D4BA8}
.es-lane-title{display:flex;align-items:center;gap:6px}
.es-lane-name{font:600 12.5px var(--es-font-sans);color:var(--es-blue-900);text-decoration:none}
.es-lane-name:hover{text-decoration:underline}
.es-lane-sub{font:400 10.5px var(--es-font-sans);color:var(--es-grey-600);margin-top:3px}
.es-lane-toggle{display:inline-flex;align-items:center;justify-content:center;min-width:24px;
  min-height:24px;border:0;background:none;padding:0;line-height:1;cursor:pointer;
  color:var(--es-grey-600);font-size:9px}
.es-lane-toggle form{display:contents}

/* Track and percentage on ONE line. The number is beside the bar, not under it, and it is what
   makes the bar readable to somebody who cannot read the bar (1.4.1). */
.es-lane-progress{display:flex;align-items:center;gap:6px;margin:4px 0 1px}
.es-lane-track{flex:1;height:5px;border-radius:999px;background:var(--es-grey-100);
  overflow:hidden}
/* green-700, not the 500 the blueprint names: 500 on grey-100 is 2.38:1 and fails the
   3:1 that a non-text indicator needs (1.4.11). The percentage beside it means the bar
   is not the only carrier, but a bar nobody can see is not worth the five pixels. */
.es-lane-track>span{display:block;height:100%;background:var(--es-green-700)}
.es-lane-pc{font:600 10px var(--es-font-mono);color:var(--es-grey-600);flex:0 0 auto}
.es-lane-chips{display:flex;flex-wrap:wrap;gap:5px;margin-top:8px}
.es-lane-chips .badge{font-size:10px;font-weight:600}

/* Cells. No border: eight boxes per lane across forty lanes is a lot of lines to read past. */
.es-lane-cell{display:flex;flex-direction:column;gap:6px;padding:7px;background:var(--es-grey-50);
  border-radius:8px}
/* An empty cell is one centred line. Most of this grid is empty most of the time. */
.es-lane-cell.is-empty{min-height:38px;align-items:center;justify-content:center;padding:6px}
.es-lane-empty{font-size:11px;color:var(--es-grey-600)}

/* One strip, not four empty cells: four empty cells is what an empty BOARD looks like. */
.es-lane-blank,.es-lane--collapsed .es-lane-folded{grid-column:2 / -1;display:flex;
  align-items:center;justify-content:space-between;gap:12px;padding:9px 11px;font-size:11px;
  color:var(--es-grey-600);background:var(--es-grey-50);border-radius:8px}

/* Done names what finished. Count and label on one line; a bare number is unreadable as
   progress, and a number stacked over a word wastes the line that could carry a title. */
.es-lane-donehead{display:flex;align-items:baseline;gap:6px}
.es-lane-done-count{font:600 15px var(--es-font-sans);color:var(--es-green-700)}
.es-lane-done{font:400 10.5px var(--es-font-sans);color:var(--es-grey-600)}
.es-lane-done-item{display:flex;align-items:baseline;gap:5px;padding:6px 9px;
  background:var(--es-white);border:1px solid var(--es-border-subtle);border-radius:6px;
  font:400 11px/1.3 var(--es-font-sans);color:var(--es-grey-600);min-width:0}
/* green-700: the tick is the only thing marking these rows as finished, and 500 on white
   is 2.99:1 -- a hair under the 3:1 a non-text indicator needs. */
.es-lane-done-item>i{font-size:9px;color:var(--es-green-700);flex:0 0 auto}
.es-lane-done-title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.es-lane-done-when{color:var(--es-grey-600);flex:0 0 auto;font-variant-numeric:tabular-nums}
.es-lane-done-when::before{content:" · "}

/* A link, not a form button. It had a grey border and 8px of chrome for a one-word action. */
.es-lane-more{display:inline-flex;align-items:center;gap:5px;min-height:24px;padding:2px 4px;
  border:0;background:none;font:600 10.5px var(--es-font-sans);color:var(--es-blue-800);
  text-decoration:none;align-self:flex-start;cursor:pointer}
.es-lane-more:hover{text-decoration:underline;color:var(--es-blue-800)}
.es-lane-more>i{font-size:8px}
.es-lane-extra{display:flex;flex-direction:column;gap:6px}

/* The card. Its own box is the wrapper, so the ⋯ can sit inside it and outside the anchor. */
.es-lane-cardwrap{position:relative;background:var(--es-white);
  border:1px solid var(--es-border-subtle);border-radius:6px}
.es-lane-cardwrap:hover{box-shadow:0 2px 8px rgba(41,63,109,.10)}
.es-lane-card{display:block;padding:7px 9px;text-decoration:none;border-radius:6px}
.es-lane-card:hover{text-decoration:none}
.es-lane-cardtitle{display:block;font:500 11.5px/1.3 var(--es-font-sans);
  color:var(--es-blue-900);padding-right:22px}
/* The meta row splits left and right. No rule above it: at this density a line per card is a
   grid of lines. */
.es-lanes .es-card-row4{display:flex;justify-content:space-between;align-items:center;gap:8px;
  margin-top:6px;padding-top:0;border-top:0;font-size:9.5px;color:var(--es-grey-600)}
.es-lane-metaleft,.es-lane-metaright{display:flex;align-items:center;gap:5px;min-width:0}
.es-lane-metaleft{overflow:hidden}
.es-lane-pill{display:inline-block;max-width:120px;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap;padding:1px 7px;border-radius:999px;font:600 9.5px var(--es-font-sans);
  color:var(--es-blue-900);background:var(--es-grey-100)}
.es-lane-pill[class*="es-tint-"]{background:var(--es-tint)}
/* Blocked is the one place an age earns a colour: how long this has gone nowhere is the most
   useful number in that column. */
.es-card-blocked{color:var(--es-red-700);font-weight:600}

/* Yours. A rail, never a filter -- "Only my projects" already filters, and the two must not be
   confused, which is why one is a rail and the other is a checkbox. */
.es-lanes.is-highlighting .es-lane-cardwrap.is-mine,
.es-kanban.is-highlighting .es-kanban-card.is-mine{border-left:3px solid var(--es-orange-500)}

/* Hidden with OPACITY, not display: it stays in the tab order when it cannot be seen. */
.es-card-menu{position:absolute;top:5px;right:5px;min-width:24px;min-height:24px;border:0;
  background:none;border-radius:6px;color:var(--es-grey-600);cursor:pointer;line-height:1;
  opacity:0;transition:opacity .12s}
.es-lane-cardwrap:hover .es-card-menu,.es-lane-cardwrap:focus-within .es-card-menu,
.es-card-menu[aria-expanded="true"],.es-card-menu:focus-visible{opacity:1}
.es-card-menu:hover{background:var(--es-grey-100)}
@media (hover:none){.es-card-menu{opacity:1}}

.es-card-pop{position:absolute;right:0;top:26px;z-index:5;min-width:158px;padding:5px;
  background:var(--es-white);border:1px solid var(--es-grey-100);border-radius:8px;
  box-shadow:0 6px 18px rgba(41,63,109,.18)}
.es-card-pop[hidden]{display:none}
.es-card-pop button,.es-card-pop a{display:block;width:100%;min-height:24px;padding:5px 9px;
  border:0;background:none;border-radius:6px;font-size:11px;text-align:left;
  color:var(--es-blue-900);text-decoration:none;cursor:pointer}
.es-card-pop button:hover,.es-card-pop a:hover,
.es-card-pop button:focus-visible,.es-card-pop a:focus-visible{
  background:var(--es-blue-tint);color:var(--es-blue-800);font-weight:600;text-decoration:none}

/* The footnote and the header count. */
/* The line under a board, on all three board screens. */
.es-board-foot{font-size:11.5px;color:var(--es-grey-600);margin:12px 0 0}
.es-lane-yours{font-weight:400;opacity:.9}


/* The source switch on My work. Not a facet: a facet is one of several questions, and this is
   THE question the screen answers. Each pill carries its own count so the other side is never
   a guess. */
.es-srcpills{display:flex;gap:7px;flex-wrap:wrap}
.es-srcpill{display:inline-flex;align-items:center;gap:7px;min-height:24px;padding:5px 13px;
  border-radius:999px;border:1px solid var(--es-border-subtle);background:var(--es-white);
  font-size:13px;font-weight:600;color:var(--es-blue-900);text-decoration:none}
.es-srcpill:hover{text-decoration:none;border-color:var(--es-blue-800)}
.es-srcpill.is-on{background:var(--es-blue-900);border-color:var(--es-blue-900);color:#fff}
.es-srcpill.is-on .es-fbar-n{background:rgba(255,255,255,.22);color:#fff}

/* ---------------------------------------------------------------------------------------------
   The card's four rows.

   Row 1 is what it IS, row 2 the title, row 3 how much of it there is, row 4 when and whose.
   THE ORDER IS IN THE RENDERER, NOT IN ANYBODY'S PREFERENCE. Rows 3 and 4 are not printed at
   all when empty, which is what makes a title-only card two lines tall.
   --------------------------------------------------------------------------------------------- */
.es-card-circle{margin-right:5px;color:var(--es-grey-600)}
.es-kanban-card .fa-circle-check{color:var(--es-green-700)}
.es-card-row3,.es-card-row4{display:flex;flex-wrap:wrap;align-items:center;gap:4px 9px;
  font-size:11.5px;color:var(--es-grey-700)}
.es-card-row3{margin-top:5px}
/* The rule appears only when row 4 has content, because it is printed only then. */
.es-card-row4{margin-top:5px;padding-top:5px;border-top:1px solid var(--es-grey-100)}
.es-card-bit{display:inline-flex;align-items:center;gap:4px;white-space:nowrap}
.es-card-bit .es-avatar{margin:0}
/* The flag carries the word as well as the colour (1.4.1). */
.es-card-priority{color:var(--es-red-700);font-weight:600}
/* So does the overdue chip: "Overdue — 19/09" says it before the tint does. */
.es-card-overdue{color:var(--es-red-700);font-weight:600;background:var(--es-red-50);
  border-radius:5px;padding:1px 6px}
.es-card-ado{font-variant-numeric:tabular-nums}

/* Compact. ONE PROPERTY ON THE BOARD, so the renderer does not branch and there is one card in
   the codebase rather than two that drift. */
[data-density="compact"] .es-kanban-card{padding:7px 9px}
[data-density="compact"] .es-kanban-title{font-size:11.5px;margin-bottom:0}
[data-density="compact"] .es-card-row3{display:none}
[data-density="compact"] .es-kanban-kind .badge{display:none}
[data-density="compact"] .es-card-row4{border-top:0;padding-top:0;margin-top:3px}

/* The filter bar on All projects: pills, a real toggle, and the Card details trigger. */
.es-fbar--pills .es-fbar-facet>summary{border-radius:999px;border:1px solid var(--es-aqua-600);
  color:var(--es-aqua-700);font-weight:500}
.es-fbar--pills .es-fbar-facet>summary .es-fbar-pick,
.es-fbar--pills .es-fbar-facet>summary .es-fbar-n{font-weight:600}
.es-fbar-spacer{flex:1 1 auto}
/* A pressed toggle, not a second checkbox: "Only my projects" filters and this does not, and
   two identical checkboxes in a row read as two filters. */
.es-fbar-toggle{display:inline-flex;align-items:center;gap:6px;min-height:24px;padding:5px 12px;
  border-radius:999px;border:1px solid var(--es-grey-300);background:var(--es-white);
  font:400 13px var(--es-font-sans);color:var(--es-grey-700);white-space:nowrap;cursor:pointer}
.es-fbar-toggle:hover{border-color:var(--es-blue-800)}
.es-fbar-toggle.is-on{background:var(--es-blue-tint);border-color:var(--es-blue-800);
  color:var(--es-blue-800);font-weight:600}
.es-fbar-trigger{display:inline-flex;align-items:center;gap:6px;min-height:24px;padding:5px 12px;
  border-radius:6px;border:1px solid var(--es-grey-300);background:var(--es-white);
  font:500 13px var(--es-font-sans);color:var(--es-blue-900);white-space:nowrap;cursor:pointer}
.es-fbar-trigger:hover{border-color:var(--es-blue-800)}
.es-fbar-trigger>i:last-child{font-size:9px;color:var(--es-grey-600)}

/* The conversation on a card. Internal: nothing written here ever reaches a ticket, and the
   compose box says so rather than leaving it to be found out. */
.es-conv-item{padding:9px 0;border-bottom:1px solid var(--es-grey-100)}
.es-conv-item:last-of-type{border-bottom:0}
.es-conv-who{display:flex;align-items:center;gap:8px;margin-bottom:4px;font-size:13px}
.es-conv-when{font-size:11.5px;color:var(--es-devcard-ink)}
.es-conv-said{display:block;font-size:13.5px;line-height:1.45;white-space:normal}
/* A removed comment leaves a line rather than a hole: the replies to a hole stop making sense. */
/* grey-600, not grey-400: at 2.65:1 the one line explaining the gap is the line
   nobody can read, which defeats the reason the row is kept at all. */
.es-conv-item.is-gone .es-conv-said{font-style:italic;color:var(--es-grey-600)}
.es-conv-tools{display:flex;gap:4px;margin-left:auto}
.es-conv-tools form{display:inline}
.es-conv-tool{min-height:24px;padding:2px 8px;border:0;background:none;border-radius:6px;
  font-size:11.5px;color:var(--es-blue-800);cursor:pointer}
.es-conv-tool:hover,.es-conv-tool:focus-visible{background:var(--es-grey-50,#F1F2F7)}
.es-conv-at{font-weight:600;color:var(--es-blue-800)}
.es-conv-compose{margin-top:11px}

/* The tag picker on a card. Ticks rather than a multi-select, because the colours are the
   point and a <select multiple> renders none of them. */
.es-tagpick{display:flex;flex-wrap:wrap;gap:5px 13px;margin-bottom:9px}

/* Card details — the popover that decides which of the above a person sees. */
.es-cardfields{position:relative;display:inline-block}
.es-cardfields-pop{position:absolute;right:0;top:32px;z-index:20;width:264px;padding:11px 13px;
  background:var(--es-white);border:1px solid var(--es-border-subtle);border-radius:10px;
  box-shadow:var(--es-shadow-md);text-align:left;color:var(--es-blue-900,#293F6D)}
.es-cardfields-pop[hidden]{display:none}
.es-cardfields-scope{font-size:11.5px;color:var(--es-devcard-ink);margin:0 0 8px}
.es-cardfields-list{display:flex;flex-direction:column;gap:3px;margin-bottom:9px}
.es-cardfields-list label{display:flex;align-items:flex-start;gap:7px;font-size:12.5px;
  min-height:24px;padding:2px 0;cursor:pointer}
/* A disabled control is exempt from 1.4.3; the REASON beside it is not, and the
   reason is the entire point of a disabled tick rather than a hidden row. */
.es-cardfields-list label.is-off{cursor:not-allowed;color:var(--es-grey-600)}
.es-cardfields-why{display:block;font-size:11px;line-height:1.3}

/* Choosing a template — the stages are the description, so they are shown rather than named. */
.es-templates{display:flex;flex-wrap:wrap;gap:10px}
.es-template{flex:1 1 220px;padding:11px 13px;border:1px solid var(--es-border-subtle);
  border-radius:9px;cursor:pointer;background:var(--es-white)}
.es-template:has(input:checked){border-color:var(--es-orange-500,#FA650D);
  box-shadow:0 0 0 1px var(--es-orange-500,#FA650D)}
.es-template input{margin-right:7px}

/* A plain tick in the filter bar, for a filter with only two states. */
.es-fbar-check{display:inline-flex;align-items:center;gap:6px;font-size:13px;white-space:nowrap}

/* Board / list switch, on a card's own header bar. Bootstrap's own switch, on a translucent
   pill so it reads in both states against navy. */
.es-viewtoggle{display:inline-flex;align-items:center;gap:9px;padding:3px 12px;border-radius:999px;
  background:rgba(255,255,255,.16)}
.es-viewtoggle-label{font:600 12px var(--es-font-sans);color:rgba(255,255,255,.6);transition:color .12s}
.es-viewtoggle-label.is-on{color:#fff}
.es-viewtoggle .form-check{min-height:0;padding-left:2.2em}
.es-viewtoggle .form-check-input{margin:0 0 0 -2.2em;cursor:pointer}
.es-viewtoggle .form-check-input:focus-visible{outline:2px solid #fff;outline-offset:2px}

/* Active-filter chip toolbar */
.es-table-filters{display:flex;align-items:center;flex-wrap:wrap;gap:8px;padding:9px 14px;
  background:var(--es-grey-50,#F1F2F7);border-bottom:.5px solid var(--es-border-subtle)}
.es-table-filters .es-filters-label{font:600 11px var(--es-font-sans);letter-spacing:.04em;text-transform:uppercase;
  color:var(--es-grey-400,#9F9F9F)}
.es-chip{display:inline-flex;align-items:center;gap:6px;padding:4px 6px 4px 11px;border-radius:999px;
  background:var(--es-aqua-50,#DFF4FC);color:var(--es-aqua-700,#0673A1);font:600 12px var(--es-font-sans)}
.es-chip button{border:0;background:transparent;color:var(--es-aqua-700,#0673A1);cursor:pointer;font-size:12px;line-height:1;padding:2px}
.es-clear-all{margin-left:auto;border:1.5px solid var(--es-grey-100,#E1E6EB);border-radius:6px;padding:5px 12px;
  font:600 12px var(--es-font-sans);color:var(--es-grey-700,#4D4D4D);background:#fff;cursor:pointer;white-space:nowrap}
.es-clear-all:hover{background:var(--es-grey-50,#F1F2F7)}

.es-filter-row>td{padding:0;border:0}
.es-filter-row>td>.es-table-filters{border-top:.5px solid var(--es-border-subtle)}
.es-filter-empty>td{padding:18px 14px;text-align:center;color:var(--es-grey-400,#9F9F9F)}

/* ---- Funnel filter popover (Excel-style: search checklist + condition row) ---- */
.es-filter-menu{position:fixed;z-index:1100;width:264px;background:#fff;border:.5px solid var(--es-border-subtle);
  border-radius:12px;box-shadow:0 12px 32px rgba(10,26,47,.22);overflow:hidden;font-family:var(--es-font-sans);
  color:var(--es-grey-700,#4D4D4D);animation:esMenuIn .12s var(--es-ease)}
@keyframes esMenuIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.es-fm-scope{margin:6px 0 2px;font:600 11px var(--es-font-sans);letter-spacing:.04em;
  text-transform:uppercase;color:var(--es-grey-400,#9F9F9F)}
.es-fm-head{display:flex;align-items:center;gap:8px;padding:9px 12px;background:var(--es-grey-50,#F1F2F7);
  border-bottom:.5px solid var(--es-border-subtle)}
.es-fm-head>i{font-size:11px;color:var(--es-blue-900,#293F6D)}
.es-fm-head strong{font:600 11px var(--es-font-sans);letter-spacing:.05em;text-transform:uppercase;color:var(--es-blue-900,#293F6D);flex:1}
.es-fm-body{padding:10px 12px}
.es-fm-search,.es-fm-val,.es-fm-op{width:100%;box-sizing:border-box;padding:6px 9px;border-radius:6px;
  border:1.5px solid var(--es-grey-100,#E1E6EB);font:400 13px var(--es-font-sans);color:var(--es-grey-700,#4D4D4D);background:#fff;outline:none}
.es-fm-search:focus,.es-fm-val:focus,.es-fm-op:focus{border-color:var(--es-aqua-500,#00AEEF);box-shadow:0 0 0 3px rgba(0,174,239,.25)}
.es-fm-list{max-height:168px;overflow-y:auto;margin:8px 0 0;border:1px solid var(--es-grey-100,#E1E6EB);border-radius:6px}
.es-fm-opt{display:flex;align-items:center;gap:8px;padding:6px 9px;font-size:13px;cursor:pointer}
.es-fm-opt:hover{background:var(--es-grey-50,#F1F2F7)}
.es-fm-opt input{accent-color:var(--es-aqua-500,#00AEEF);width:15px;height:15px;flex:none}
.es-fm-opt span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.es-fm-opt.all{border-bottom:1px solid var(--es-grey-100,#E1E6EB);font-weight:600;position:sticky;top:0;background:#fff}
.es-fm-cond{display:flex;gap:6px;margin-top:10px}
.es-fm-op{flex:0 0 96px}
.es-fm-divider{margin:10px 0 0;font:600 10px var(--es-font-sans);letter-spacing:.06em;text-transform:uppercase;color:var(--es-grey-400,#9F9F9F)}
.es-fm-foot{display:flex;gap:8px;padding:10px 12px;border-top:.5px solid var(--es-border-subtle);background:var(--es-grey-50,#F1F2F7)}
.es-fm-foot button{flex:1;padding:7px 10px;border-radius:6px;font:600 12px var(--es-font-sans);cursor:pointer}
.es-fm-clear{border:1.5px solid var(--es-grey-100,#E1E6EB);background:#fff;color:var(--es-grey-700,#4D4D4D)}
.es-fm-clear:hover{background:#fff;border-color:var(--es-grey-300,#C7CCD4)}
.es-fm-apply{border:none;background:var(--es-blue-900,#293F6D);color:#fff}
.es-fm-apply:hover{opacity:.9}

/* Footer / pagination */
.es-table-foot{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;
  padding:10px 16px;border-top:.5px solid var(--es-border-subtle);background:#fff}
.es-table-foot .es-foot-count{font:400 12px var(--es-font-sans);color:var(--es-grey-400,#9F9F9F)}
/* Rows-per-page selector */
.es-foot-size{display:inline-flex;align-items:center;gap:8px;margin-left:auto}
.es-foot-size label{margin:0;font:600 11px var(--es-font-sans);letter-spacing:.04em;text-transform:uppercase;color:var(--es-grey-400,#9F9F9F)}
.es-foot-select{height:34px;padding:0 30px 0 11px;border:1px solid var(--es-grey-100,#E1E6EB);border-radius:6px;background-color:#fff;
  color:var(--es-grey-700,#4D4D4D);font:600 13px var(--es-font-sans);cursor:pointer;appearance:none;-webkit-appearance:none;-moz-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%234D4D4D' stroke-width='2'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 9px center;background-size:14px}
.es-foot-select:focus{outline:none;border-color:var(--es-aqua-500,#00AEEF);box-shadow:0 0 0 3px rgba(0,174,239,.25)}
/* Legacy server-side pager (Bootstrap .pagination emitted by Table::render) sits in the foot — proper bordered buttons */
.es-table-foot .pagination{margin:0;display:inline-flex;flex-wrap:wrap;gap:4px;padding-left:0;list-style:none}
.es-table-foot .pagination>li{display:inline-flex}
.es-table-foot .pagination>li>a{display:inline-flex;align-items:center;justify-content:center;min-width:34px;height:34px;padding:0 10px;
  border:1px solid var(--es-grey-100,#E1E6EB);border-radius:6px;background:#fff;color:var(--es-grey-700,#4D4D4D);
  font:600 13px var(--es-font-sans);line-height:1;text-decoration:none;cursor:pointer;transition:background .12s,border-color .12s,color .12s}
.es-table-foot .pagination>li>a:hover{background:var(--es-grey-50,#F1F2F7);border-color:var(--es-grey-300,#C7CCD4);color:var(--es-blue-900,#293F6D)}
.es-table-foot .pagination>li.active>a{border:1.5px solid var(--es-blue-800,#4265AF);background:var(--es-blue-800,#4265AF);color:#fff;cursor:default}
.es-table-foot .pagination>li.disabled>a{opacity:.45;background:var(--es-grey-50,#F1F2F7);cursor:not-allowed;pointer-events:none}

.es-table-scroll.es-scrolls>.es-table>tfoot>tr>td{padding:0;background:#fff;
  border-top:.5px solid var(--es-border-subtle)}
.es-table-scroll.es-scrolls .es-table-foot{position:sticky;left:0;width:max-content;
  border-top:0;justify-content:flex-start}
.es-table-scroll.es-scrolls .es-foot-size{margin-left:0}

/* Navy dropdown menu — matches the system nav chrome; opt-in via .es-dropdown-navy on a Bootstrap .dropdown-menu */
.dropdown-menu.es-dropdown-navy{background:var(--es-blue-900,#293F6D);border:1px solid rgba(255,255,255,.12);border-radius:10px;
  box-shadow:var(--es-shadow-md,0 8px 24px rgba(10,26,47,.22));padding:6px;min-width:240px}
.dropdown-menu.es-dropdown-navy .dropdown-item{display:flex;align-items:center;gap:9px;color:rgba(255,255,255,.9);
  border-radius:6px;padding:8px 12px;font-size:13px;white-space:nowrap}
.dropdown-menu.es-dropdown-navy .dropdown-item:hover,.dropdown-menu.es-dropdown-navy .dropdown-item:focus{background:rgba(255,255,255,.12);color:#fff}
.dropdown-menu.es-dropdown-navy .dropdown-item .text-danger{color:#F36B6B!important}
.dropdown-menu.es-dropdown-navy .dropdown-divider{border-top-color:rgba(255,255,255,.14)}
.es-pager{display:inline-flex;gap:4px}
.es-pager button{min-width:30px;height:30px;border-radius:6px;cursor:pointer;font:600 12px var(--es-font-sans);
  border:1px solid var(--es-grey-100,#E1E6EB);background:#fff;color:var(--es-grey-700,#4D4D4D)}
.es-pager button[aria-current="page"]{border:1.5px solid var(--es-aqua-500,#00AEEF);background:var(--es-aqua-50,#DFF4FC);color:var(--es-aqua-700,#0673A1)}
.es-pager button:disabled{opacity:.4;cursor:not-allowed}

/* Avatar — initials chip */
.es-avatar{width:40px;height:40px;border-radius:50%;background:var(--es-aqua-500);color:#fff;
  display:inline-flex;align-items:center;justify-content:center;font-weight:600;font-size:.875rem;flex-shrink:0}

/* Status dot */
.es-status{display:inline-flex;align-items:center;gap:6px;font-size:.8125rem;color:var(--es-text-body)}
.es-status::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--es-grey-400)}
.es-status.tone-green::before{background:var(--es-green-500)}
.es-status.tone-orange::before{background:var(--es-orange-500)}
.es-status.tone-red::before{background:var(--es-red-500)}
.es-status.tone-aqua::before{background:var(--es-aqua-500)}

/* Metric tile. White, not grey-50: a tile sits directly on the page, so the body-background token would leave the figure people read first with no contrast. */
.es-metric{background:var(--es-white);border:.5px solid var(--es-border-subtle);border-radius:.5rem;
  padding:.875rem 1rem;text-align:center}
/* Linked tiles: the whole tile is the target. Hover follows the button rule -- opacity. */
a.es-metric{display:block;text-decoration:none;transition:opacity var(--es-dur) var(--es-ease),
  box-shadow var(--es-dur) var(--es-ease)}
a.es-metric:hover{opacity:.86;box-shadow:var(--es-shadow-sm)}
a.es-metric:focus-visible{outline:3px solid var(--es-blue-800);outline-offset:2px}
.es-metric .val{font-size:1.625rem;font-weight:600;line-height:1;color:var(--es-blue-800)}
.es-metric .val.tone-green{color:var(--es-green-500)}.es-metric .val.tone-orange{color:var(--es-orange-500)}
.es-metric .val.tone-red{color:var(--es-red-500)}.es-metric .val.tone-aqua{color:var(--es-aqua-500)}
/* Callers were already asking for these two and silently getting the base blue, so "Awaiting
   approval" drew identically to "Entitlement" and a nought read as a figure worth having. */
.es-metric .val.tone-yellow{color:var(--es-yellow-500)}
.es-metric .val.tone-grey{color:var(--es-grey-400)}
.es-metric .lbl{font-size:.625rem;color:var(--es-text-muted);margin-top:4px;text-transform:uppercase;letter-spacing:.08em}

/* Task rows. .es-task-row is a whole-row link because a title is a small hit area; .es-task:target tints the row a deep link landed on. */
.es-task-row{color:inherit;text-decoration:none;
  transition:background var(--es-dur) var(--es-ease)}
.es-task-row:hover{background:var(--es-aqua-50);color:inherit}
.es-task-row:focus-visible{outline:3px solid var(--es-blue-800);outline-offset:-3px}
.es-task:target{background:var(--es-aqua-50);border-radius:.375rem}

/* Vertical (sidebar) nav — variant 1i: navy panel, white current-page fill + 4px orange rail
   (matches the ul.lhs VerticalNav in §10). */
.es-vnav{background:var(--es-blue-900);border-radius:.625rem;padding:8px 0;min-width:232px;overflow:hidden}
.es-vnav a{display:flex;align-items:center;gap:10px;padding:10px 16px;font-size:.8125rem;
  color:rgba(255,255,255,.82);border-left:4px solid transparent;text-decoration:none;
  transition:background var(--es-dur) var(--es-ease),color var(--es-dur) var(--es-ease)}
.es-vnav a i{width:18px;text-align:center;font-size:15px;color:rgba(255,255,255,.6)}
.es-vnav a:hover{background:rgba(255,255,255,.06);color:#fff}
.es-vnav a:hover i{color:rgba(255,255,255,.85)}
.es-vnav a:focus-visible{outline:3px solid #fff;outline-offset:-3px}
/* Current page — white fill + navy text + 4px orange rail + navy icon */
.es-vnav a.active{background:#fff;color:var(--es-blue-900,#293F6D);font-weight:600;
  border-left-color:var(--es-orange-500,#FA650D)}
.es-vnav a.active i{color:var(--es-blue-800,#4265AF)}
.es-vnav a.active .badge{background:var(--es-blue-tint,#E7ECF6)!important;color:var(--es-blue-800,#4265AF)!important}
.es-vnav a.nav-home:not(.active){background:var(--es-blue-850,#33497D);color:#fff}
.es-vnav a.nav-home:not(.active) i{color:rgba(255,255,255,.85)}

/* In-screen underline tabs (DS "Tabs") */
.es-tabs{display:flex;border-bottom:2px solid var(--es-grey-100)}
.es-tabs button{appearance:none;background:none;border:none;cursor:pointer;padding:9px 16px;margin-bottom:-2px;
  font:600 .8125rem var(--es-font-sans);color:var(--es-text-muted);border-bottom:2px solid transparent}
.es-tabs button.active{color:var(--es-accent-press);border-bottom-color:var(--es-blue-800)}

/* Workspace tabs (folder tabs below chrome) — server-rendered, JS wires interactions */
.es-wtabs{display:flex;align-items:flex-end;gap:3px;background:var(--es-grey-100);padding:7px 14px 0;min-height:43px;overflow-x:auto;scrollbar-width:thin}
.es-wtabs::-webkit-scrollbar{height:6px}.es-wtabs::-webkit-scrollbar-thumb{background:var(--es-grey-300);border-radius:3px}
.es-wtab{position:relative;display:flex;align-items:center;gap:9px;height:36px;padding:0 11px 0 14px;
  flex:0 1 auto;min-width:48px;max-width:220px;border-radius:9px 9px 0 0;cursor:pointer;user-select:none;
  white-space:nowrap;font:500 .8125rem/1.2 var(--es-font-sans);color:var(--es-grey-700);
  transition:background var(--es-dur) var(--es-ease),color var(--es-dur) var(--es-ease)}
.es-wtab:not(.active):hover{background:rgba(255,255,255,.55);color:var(--es-blue-800)}
.es-wtab.active{background:#fff;color:var(--es-blue-800);font-weight:600;z-index:3;flex-shrink:.35;min-width:96px}
.es-wtab.active::before,.es-wtab.active::after{content:"";position:absolute;bottom:0;width:10px;height:10px;background:#fff}
.es-wtab.active::before{left:-10px;-webkit-mask:radial-gradient(circle at top left,#0000 10px,#000 10.5px);mask:radial-gradient(circle at top left,#0000 10px,#000 10.5px)}
.es-wtab.active::after{right:-10px;-webkit-mask:radial-gradient(circle at top right,#0000 10px,#000 10.5px);mask:radial-gradient(circle at top right,#0000 10px,#000 10.5px)}
.es-wtab .lead{font-size:12px;width:13px;text-align:center;flex-shrink:0;color:var(--es-grey-400)}
.es-wtab.active .lead{color:var(--es-accent)}
.es-wtab .title{overflow:hidden;text-overflow:ellipsis;min-width:0;flex:0 1 auto}
.es-wtab .close{width:19px;height:19px;border:none;background:transparent;border-radius:5px;color:var(--es-grey-400);
  cursor:pointer;font-size:11px;flex-shrink:0;display:inline-flex;align-items:center;justify-content:center}
.es-wtab .close:hover{background:rgba(159,159,159,.26);color:var(--es-blue-900)}
.es-wtab .pin{font-size:10px;color:var(--es-accent);opacity:.7;margin-left:1px;transform:rotate(40deg);flex-shrink:0}
.es-wtab.dragging{opacity:.4}.es-wtab.drop-target{box-shadow:inset 2.5px 0 0 0 var(--es-accent)}

.es-ribbon{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:9px 16px 12px;
  background:var(--es-grey-100,#E1E6EB);                                   /* fallback ≈ slightly darker step */
  background:color-mix(in srgb, var(--es-grey-50,#F1F2F7) 95%, #000);      /* 5% darker — a shade lighter than the 10%-darker workspace-tabs strip */
  border-bottom:2px solid var(--es-white,#FFFFFF)}
.es-ribbon .hidden{display:none!important}
.es-ribbon a,.es-ribbon .es-ribbon-tab{
  display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:10px 14px;
  border:1.5px solid var(--es-grey-300,#C7CCD4);border-radius:8px;background:#fff;
  color:var(--es-grey-700,#4D4D4D);font-size:13px;font-weight:500;line-height:1.2;
  text-decoration:none;white-space:nowrap;cursor:pointer;position:static;top:auto;
  transition:background .12s var(--es-ease),color .12s var(--es-ease),border-color .12s var(--es-ease)}
.es-ribbon a>i,.es-ribbon .es-ribbon-tab>i{color:var(--es-grey-400,#9F9F9F);font-size:15px}
.es-ribbon a:hover,.es-ribbon .es-ribbon-tab:hover{
  border-color:var(--es-blue-600,#5481E0);background:#fff;color:var(--es-blue-800,#4265AF)!important}
/* active — orange frame + tint + leading dot + semibold navy label */
.es-ribbon a.active,.es-ribbon .es-ribbon-tab.active,
.es-ribbon .es-ribbon-tab:has(.ribbonItemSelected){
  border-color:var(--es-orange-500,#FA650D);background:var(--es-orange-50,#FEE8D8);
  color:var(--es-blue-900,#293F6D)!important;font-weight:600}
.es-ribbon a.active>i,.es-ribbon .es-ribbon-tab.active>i,
.es-ribbon .es-ribbon-tab:has(.ribbonItemSelected)>i{color:var(--es-orange-600,#C14800)}
.es-ribbon a.active::before,.es-ribbon .es-ribbon-tab.active::before,
.es-ribbon .es-ribbon-tab:has(.ribbonItemSelected)::before{
  content:"";width:8px;height:8px;border-radius:999px;background:var(--es-orange-500,#FA650D);flex:none}
/* keyboard focus */
.es-ribbon a:focus-visible,.es-ribbon .es-ribbon-tab:focus-visible{
  outline:3px solid var(--es-blue-800,#4265AF);outline-offset:2px;border-radius:8px}
/* counter badge — outlined pill (not colour-only) */
.es-ribbon .es-tab-badge{display:inline-flex;align-items:center;justify-content:center;min-width:18px;
  height:18px;padding:0 6px;border-radius:999px;font-family:var(--es-font-mono);font-size:10px;font-weight:700;line-height:1}
.es-ribbon .es-tab-badge-red   {background:var(--es-red-50,#FDDCDC);color:var(--es-red-700,#A01010);border:1px solid var(--es-red-500,#DE1F1F)}
.es-ribbon .es-tab-badge-aqua  {background:var(--es-aqua-50,#DFF4FC);color:var(--es-aqua-700,#0673A1);border:1px solid var(--es-aqua-500,#00AEEF)}
.es-ribbon .es-tab-badge-orange{background:var(--es-orange-50,#FEE8D8);color:var(--es-orange-600,#C14800);border:1px solid var(--es-orange-500,#FA650D)}
.es-ribbon .es-tab-badge-navy  {background:var(--es-blue-tint,#E7ECF6);color:var(--es-blue-800,#4265AF);border:1px solid var(--es-blue-600,#5481E0)}
.es-ribbon .es-tab-badge-yellow{background:var(--es-yellow-50,#FEF1DC);color:var(--es-yellow-700,#B4760E);border:1px solid var(--es-yellow-500,#FCA833)}
.es-ribbon .es-tab-badge-green {background:var(--es-green-50,#E1F4E1);color:var(--es-green-700,#1F7A22);border:1px solid var(--es-green-500,#27AC2A)}
.es-ribbon .es-tab-badge-grey  {background:var(--es-grey-50,#F1F2F7);color:var(--es-grey-700,#4D4D4D);border:1px solid var(--es-grey-400,#9F9F9F)}
.es-ribbon .label-as-badge{border:1px solid rgba(0,0,0,.3)}
/* chips are self-delimiting — retire inline separators */
.es-ribbon .es-ribbon-divider{display:none}

.es-ovf-on{flex-wrap:nowrap!important;overflow:hidden!important}
.es-ovf-hidden{display:none!important}
.es-ovf-more[hidden],.es-ovf-menu[hidden]{display:none!important}
.es-ovf-more{display:inline-flex;align-items:center;gap:6px;flex:none;cursor:pointer;
  border:1.5px solid var(--es-grey-300,#C7CCD4);border-radius:8px;background:#fff;
  color:var(--es-grey-700,#4D4D4D);font-family:'Poppins',system-ui,sans-serif;
  transition:background .12s var(--es-ease),color .12s var(--es-ease),border-color .12s var(--es-ease)}
.es-ovf-more:hover{border-color:var(--es-blue-600,#5481E0);color:var(--es-blue-800,#4265AF)}
.es-ovf-more[aria-expanded="true"]{border-color:var(--es-blue-600,#5481E0);
  color:var(--es-blue-800,#4265AF);background:var(--es-blue-tint,#E7ECF6)}
.es-ovf-more:focus-visible{outline:3px solid var(--es-blue-800,#4265AF);outline-offset:2px}
.es-ovf-more>i{font-size:15px}
.es-ovf-count{font-family:var(--es-font-mono);font-size:11px;font-weight:700;line-height:1}
.es-ovf-count:empty{display:none}
/* ⋯ sized to sit in each strip */
.es-ribbon .es-ovf-more{min-height:44px;padding:10px 14px}
#esWorkspaceTabs .es-ovf-more{min-height:42px;padding:10px 12px;align-self:flex-end;font-size:13px;font-weight:500}

/* the dropdown panel (body-mounted) */
.es-ovf-menu{position:fixed;z-index:1080;min-width:220px;max-width:340px;max-height:70vh;overflow-y:auto;
  background:#fff;border:.5px solid rgba(10,26,47,.10);border-radius:10px;padding:6px;
  box-shadow:0 12px 28px rgba(10,26,47,.14);font-family:'Poppins',system-ui,sans-serif}
.es-ovf-item{display:flex;align-items:center;gap:2px;border-radius:6px}
a.es-ovf-item,.es-ovf-link{display:flex;align-items:center;gap:11px;flex:1 1 auto;min-width:0;
  padding:9px 11px;border-radius:6px;text-decoration:none;font-size:13px;font-weight:500;
  color:var(--es-grey-700,#4D4D4D)}
a.es-ovf-item:hover,.es-ovf-link:hover,.es-ovf-item:hover{background:var(--es-aqua-50,#DFF4FC);color:var(--es-blue-900,#293F6D)}
a.es-ovf-item>i,.es-ovf-link>i{width:16px;text-align:center;font-size:13px;color:var(--es-grey-400,#9F9F9F);flex:none}
a.es-ovf-item:hover>i,.es-ovf-item:hover .es-ovf-link>i{color:var(--es-aqua-500,#00AEEF)}
.es-ovf-label{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
a.es-ovf-item.is-current,.es-ovf-item.is-current{background:var(--es-orange-50,#FEE8D8)}
a.es-ovf-item.is-current .es-ovf-label,.es-ovf-item.is-current .es-ovf-label{color:var(--es-blue-900,#293F6D);font-weight:600}
.es-ovf-item .es-tab-badge,.es-ovf-item .label,a.es-ovf-item .es-tab-badge,a.es-ovf-item .label{margin-left:auto}
.es-ovf-x{flex:none;width:26px;height:26px;border:none;background:transparent;border-radius:6px;cursor:pointer;
  color:var(--es-text-muted,#6B6B6B);display:inline-flex;align-items:center;justify-content:center;font-size:12px}
.es-ovf-x:hover{background:var(--es-red-50,#FDDCDC);color:var(--es-red-700,#A01010)}

#crmNav.navbar{background-color:var(--es-blue-800,#4265AF);border:none;border-radius:0;
  box-shadow:none;min-height:56px;margin-bottom:0;padding-top:0;padding-bottom:0;
  font-family:'Poppins',system-ui,sans-serif}
#crmNav > .container-fluid{min-width:0}
#crmNav .navbar-collapse{border-color:rgba(255,255,255,.10);box-shadow:none;min-width:0}

/* -- brand chip: white, so the blue-800 wordmark stays legible on the blue bar -- */
#crmNav #crmNavBar > li.es-brand-pill{display:flex;align-items:center;margin-right:4px}
#crmNav #crmNavBar > li.es-brand-pill > a.es-brand-link{height:36px;display:flex;align-items:center;
  padding:0 15px;border-radius:999px;text-decoration:none;border-bottom:none;box-shadow:none;
  background-color:color-mix(in srgb,var(--es-grey-50,#F1F2F7) 55%,var(--es-grey-100,#E1E6EB) 45%);
  color:var(--es-blue-800,#4265AF);
  transition:opacity .14s ease,background-color .14s ease}
#crmNav #crmNavBar > li.es-brand-pill.active > a.es-brand-link{background-color:var(--es-white,#fff)}
#crmNav #crmNavBar > li.es-brand-pill > a.es-brand-link:hover,
#crmNav #crmNavBar > li.es-brand-pill > a.es-brand-link:focus{opacity:.86}
#crmNav .es-wordmark{color:var(--es-blue-800,#4265AF);font-weight:600;font-size:20px;
  letter-spacing:-.01em;vertical-align:middle}
#crmNav .es-wordmark .es-orange{color:var(--es-orange-500,#FA650D)}

/* -- primary links -- */
#crmNav .navbar-nav{margin:0;align-items:stretch}
#crmNav .navbar-nav > li > a,#crmNav .navbar-nav > li > .nav-link{display:flex;align-items:center;
  height:56px;padding:0 11px;font-size:14px;font-weight:500;line-height:18px;white-space:nowrap;
  color:rgba(255,255,255,.90);border-bottom:3px solid transparent;
  transition:color .14s ease,background-color .14s ease}
#crmNav .navbar-nav > li > a:hover,#crmNav .navbar-nav > li > a:focus,
#crmNav .navbar-nav .show > a,#crmNav .navbar-nav .show > a:hover,
#crmNav .navbar-nav .show > a:focus{color:#fff;background-color:rgba(255,255,255,.12)}
#crmNav .navbar-nav > .active > a,#crmNav .navbar-nav > .active > a:hover,
#crmNav .navbar-nav > .active > a:focus{color:#fff;font-weight:600;background-color:transparent;
  border-bottom:3px solid var(--es-aqua-500,#00AEEF)}
#crmNav .navbar-nav > li > a.dropdown-toggle::after{display:none}
#crmNav .es-caret{font-size:9px;opacity:.7;margin-left:3px}

/* -- dropdowns: navy surface, aqua-700 on the current page -- */
#crmNav .dropdown-menu{background-color:var(--es-blue-900,#293F6D);border:1px solid rgba(255,255,255,.10);
  border-radius:10px;box-shadow:var(--es-shadow-md,0 8px 24px rgba(10,26,47,.22));margin-top:0;
  padding:6px;min-width:200px;max-height:80vh;overflow-y:auto}
#crmNav .dropdown-menu li .dropdown-item{color:rgba(255,255,255,.85);font-size:13px;
  padding:8px 12px;border-radius:6px;white-space:nowrap;background:none;border:0;width:100%;
  text-align:left}
#crmNav .dropdown-menu li .dropdown-item:hover,
#crmNav .dropdown-menu li .dropdown-item:focus{background-color:rgba(255,255,255,.12);color:#fff}
#crmNav .dropdown-menu li form{margin:0}
#crmNav .dropdown-menu .dropdown-item.active{background-color:var(--es-aqua-700,#0673A1);color:#fff}
#crmNav .dropdown-menu .dropdown-item.disabled{color:rgba(255,255,255,.38)}
#crmNav .dropdown-menu .dropdown-divider{background-color:rgba(255,255,255,.10);border:none;
  height:1px;margin:6px 4px}

/* -- right-hand utilities -- */
#crmNav #crmNavRight{margin:0;align-items:center;flex-shrink:0}
#crmNav #crmNavRight > li > a,#crmNav #crmNavRight > li > .nav-link{display:flex;align-items:center;
  gap:7px;height:auto;padding:9px 10px;font-size:14px;font-weight:500;line-height:18px;
  white-space:nowrap;border-radius:8px;border-bottom:none;color:rgba(255,255,255,.90)}
#crmNav #crmNavRight > li > a:hover,#crmNav #crmNavRight > li > a:focus{color:#fff;
  background-color:rgba(255,255,255,.12)}
#crmNav #crmNavRight .es-icon{font-size:15px;vertical-align:middle}

/* -- bell: orange, because unread is attention rather than alarm -- */
#crmNav #crmNavRight > li > a .es-bell-count{position:absolute;top:1px;right:1px;min-width:16px;
  height:16px;padding:0 4px;border-radius:999px;background:var(--es-orange-500,#FA650D);color:#fff;
  font:700 10px/16px var(--es-font-mono);text-align:center}
#crmNav .es-bell-menu{min-width:320px;max-width:380px}
#crmNav .es-bell-menu li .dropdown-item{display:flex;align-items:flex-start;gap:11px;
  white-space:normal;padding:9px 12px}
#crmNav .es-bell-menu li .dropdown-item > i{margin-top:2px;width:16px;text-align:center;
  color:rgba(255,255,255,.55);flex:none}
#crmNav .es-bell-menu li .dropdown-item.es-bell-unread{background-color:rgba(255,255,255,.10)}
#crmNav .es-bell-subject{display:block;color:#fff}
#crmNav .es-bell-when{display:block;font-size:11px;color:rgba(255,255,255,.60)}

/* -- sign out -- */
#crmNav #crmNavLogout{background-color:var(--es-red-500,#DE1F1F);border-radius:6px;border:none;
  padding:0;margin:0 4px 0 6px;align-self:center}
#crmNav #crmNavLogout a{display:flex;align-items:center;gap:5px;color:#fff;font-size:12px;
  font-weight:600;padding:7px 12px;line-height:16px;white-space:nowrap;text-decoration:none}
#crmNav #crmNavLogout:hover{background-color:var(--es-red-700,#A01010)}

#crmNav .navbar-toggler{border:none;padding:8px;align-self:center}
#crmNav .navbar-toggler .navbar-toggler-icon{filter:brightness(0) invert(1)}
#crmNav .navbar-toggler:hover,#crmNav .navbar-toggler:focus{background-color:rgba(255,255,255,.15);
  box-shadow:none}

@media (min-width:992px){
  /* the recessed pill track, 44px centred in the 56px bar */
  #crmNav #crmNavBar{align-self:center;align-items:center;margin-left:8px;padding:4px;
    background:rgba(0,0,0,.22);border-radius:999px;box-shadow:inset 0 1px 3px rgba(0,0,0,.25)}
  #crmNav #crmNavBar > li > a{height:36px;padding:0 15px;border-radius:999px;border-bottom:none}
  #crmNav #crmNavBar > li > a:hover,#crmNav #crmNavBar > li > a:focus,
  #crmNav #crmNavBar .show > a{color:#fff;background-color:rgba(255,255,255,.12)}
  /* the area you are in = solid white chip with navy-900 text */
  #crmNav #crmNavBar > .active > a,#crmNav #crmNavBar > .active > a:hover,
  #crmNav #crmNavBar > .active > a:focus{color:var(--es-blue-900,#293F6D);font-weight:600;
    background-color:#fff;border-bottom:none;box-shadow:0 2px 6px rgba(10,26,47,.28)}
  #crmNav #crmNavBar > .active > a .es-caret{opacity:.55}
  #crmNav #crmNavRight > li > a.es-iconbtn{position:relative;width:34px;height:34px;padding:0;
    justify-content:center;border-radius:8px}
}
/* Top app bar (chrome) */
.es-appbar{background:var(--es-blue-800);height:60px;display:flex;align-items:center;padding:0 18px;color:#fff}
.es-appbar .es-wordmark{font-size:20px}

.es-viewas{padding:10px 24px;background:var(--es-grey-50,#F1F2F7);
  border-bottom:1px solid var(--es-grey-100,#E1E6EB)}
.es-viewas-form{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:0}
.es-viewas-state{display:inline-flex;align-items:center;gap:7px;font-size:12px;
  color:var(--es-grey-700,#4D4D4D)}
.es-viewas-state>i{color:var(--es-grey-400,#9F9F9F);font-size:13px}
.es-viewas-state.viewing{color:var(--es-aqua-700,#0673A1);font-weight:600}
.es-viewas-state.viewing>i{color:var(--es-aqua-500,#00AEEF)}
.es-viewas-note{font-weight:400;color:var(--es-grey-400,#9F9F9F)}
.es-viewas-label{font-size:12px;color:var(--es-grey-400,#9F9F9F);margin:0 0 0 auto}
.es-viewas-select{width:auto;min-width:240px;max-width:100%}
.es-viewas-flash{display:inline-flex;align-items:center;gap:6px;font-size:12px;
  color:var(--es-red-700,#A01010)}
.es-viewas-flash>i{color:var(--es-red-500,#DE1F1F)}
/* viewing state — tint the whole strip so it cannot be mistaken for the resting
   one at a glance, without borrowing the ribbon's orange */
.es-viewas:has(.es-viewas-state.viewing){background:var(--es-aqua-50,#DFF4FC);
  border-bottom-color:var(--es-aqua-500,#00AEEF)}

/* the same notice inside the register, which the overlay loads with ?exclusive=1
   and therefore without navigation.php's banner */
.es-register-readonly{display:flex;align-items:center;gap:10px;
  max-width:1100px;margin:0 auto 12px}

.es-viewas-banner{padding:12px 24px 0}
.es-viewas-banner .alert{display:flex;align-items:center;gap:10px;margin:0}
.es-viewas-banner-form{margin:0 0 0 auto}

@media (max-width:575.98px){
  .es-viewas{padding:10px 16px}
  .es-viewas-label{margin-left:0}
  .es-viewas-select{min-width:0;flex:1 1 100%}
  .es-viewas-banner{padding:12px 16px 0}
  .es-viewas-banner .alert{flex-wrap:wrap}
  .es-viewas-banner-form{margin-left:0}
}

@property --es-glow-angle{syntax:"<angle>";inherits:false;initial-value:0deg}
@keyframes esGlowSpin{to{--es-glow-angle:360deg}}

.es-glow-ring{position:relative;z-index:0;border-radius:var(--es-glow-radius,10px)}
.es-glow-ring::before,
.es-glow-ring::after{content:"";position:absolute;inset:calc(var(--es-glow-width,3px) * -1);z-index:-1;border-radius:inherit}
.es-glow-ring::after{inset:-8px;z-index:-2;filter:blur(14px);opacity:.85}
.es-glow-ring-surface{border-radius:var(--es-glow-radius,10px)}

.es-glow-ring::before,
.es-glow-ring::after,
.es-glow-ring-surface{
  background:conic-gradient(from var(--es-glow-angle),#ff7a00,#ffd166,#06d6a0,#118ab2,#ff7a00);
  animation:esGlowSpin var(--es-glow-duration,8s) linear infinite;
}

/* Held still rather than removed: the ring still marks what it marks. */
@media (prefers-reduced-motion:reduce){
  .es-glow-ring::before,.es-glow-ring::after,.es-glow-ring-surface{animation:none}
}

ul.lhs.list-group{background:var(--es-blue-900,#293F6D)!important;border:0!important;border-radius:10px!important;
  overflow:hidden;padding:6px 0;margin-bottom:16px;box-shadow:var(--es-shadow-sm,0 1px 3px rgba(10,26,47,.18));
  list-style:none;user-select:none}
ul.lhs>.list-group-item,
ul.lhs .lhs-sub>.list-group-item{border:0!important;border-left:4px solid transparent!important;border-radius:0!important;
  box-shadow:none!important;float:none!important;position:relative;cursor:pointer;font-size:13px;line-height:1.3;
  padding:9px 16px;background-color:transparent!important;color:rgba(255,255,255,.82)!important;
  transition:background-color .12s var(--es-ease),color .12s var(--es-ease)}
ul.lhs .list-group-item.disabled{pointer-events:none}
ul.lhs>.list-group-item:focus-visible,
ul.lhs .lhs-sub>.list-group-item:focus-visible{outline:3px solid #fff!important;outline-offset:-3px}

/* Header row (.active) — "Learners" / learner name */
ul.lhs>.list-group-item.active{background-color:transparent!important;color:#fff!important;font-weight:600;font-size:14px;
  cursor:default;padding:12px 16px 11px;border-left:0!important;border-bottom:1px solid rgba(255,255,255,.10)!important;margin-bottom:4px}
ul.lhs>.list-group-item.active .font-mono{color:rgba(255,255,255,.6)!important}

/* Section eyebrow — additive, non-interactive group label (variant 1i grouping).
   Matched at any depth so an eyebrow inside a conditional block/sub-list still styles. */
ul.lhs .lhs-section{border-left:0!important;background:transparent!important;cursor:default;list-style:none;
  padding:15px 16px 6px!important;font-size:11px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;
  color:rgba(255,255,255,.85)!important}
ul.lhs .lhs-section:hover{background:transparent!important}

/* Idle leading icons */
ul.lhs>.list-group-item:not(.active)>span.fal,
ul.lhs>.list-group-item:not(.active)>span.fa{width:17px;text-align:center;color:rgba(255,255,255,.6)!important}
/* Hover */
ul.lhs>.list-group-item:not(.active):not(.search):not(.selected):not(.lhs-section):hover{background-color:rgba(255,255,255,.06)!important;color:#fff!important}
ul.lhs>.list-group-item:not(.active):not(.search):not(.selected):not(.lhs-section):hover>span.fal,
ul.lhs>.list-group-item:not(.active):not(.search):not(.selected):not(.lhs-section):hover>span.fa{color:rgba(255,255,255,.85)!important}

/* Current page (.selected) — variant 1i: white fill + 4px orange rail + navy text/icon */
ul.lhs>.list-group-item.selected{background-color:#fff!important;color:var(--es-blue-900,#293F6D)!important;font-weight:600;
  border-left:4px solid var(--es-orange-500,#FA650D)!important}
ul.lhs>.list-group-item.selected>span.fal,
ul.lhs>.list-group-item.selected>span.fa{color:var(--es-blue-800,#4265AF)!important}
/* badge must stay legible on the white selected row */
ul.lhs>.list-group-item.selected .badge{background:var(--es-blue-tint,#E7ECF6)!important;color:var(--es-blue-800,#4265AF)!important}

/* Search row */
ul.lhs>.list-group-item.search{cursor:default;padding:6px 12px 8px}
ul.lhs>.list-group-item.search .input-group{background:rgba(255,255,255,.10);border-radius:6px;overflow:hidden}
ul.lhs>.list-group-item.search .form-control{border:0;background:transparent;color:#fff;font-size:12.5px;box-shadow:none}
ul.lhs>.list-group-item.search .form-control::placeholder{color:rgba(255,255,255,.55)}
ul.lhs>.list-group-item.search .btn{border:0;background:transparent;color:rgba(255,255,255,.7)}

/* Expand chevron */
ul.lhs .greyArrow{color:rgba(255,255,255,.55)!important;transition:transform .15s var(--es-ease)}
ul.lhs>.list-group-item.open>.greyArrow{transform:rotate(180deg)}

ul.lhs .lhs-sub{list-style:none;margin:4px -16px -9px!important;padding:0!important;overflow:hidden;max-height:0;
  width:auto!important;min-width:0!important;position:static!important;float:none!important;inset:auto!important;
  transform:none!important;z-index:auto!important;box-shadow:none!important;border:0!important;border-radius:0!important;
  display:block!important;background:var(--es-blue-850,#33497D)!important;transition:max-height .2s var(--es-ease)}
ul.lhs>.list-group-item.open>.lhs-sub{max-height:1000px}
ul.lhs .lhs-sub>.list-group-item{font-size:12.5px;padding:8px 16px 8px 34px;color:rgba(255,255,255,.85)!important}
ul.lhs .lhs-sub>.list-group-item:not(.selected):hover{background-color:rgba(255,255,255,.05)!important;color:#fff!important}
ul.lhs .lhs-sub>.list-group-item.selected{background-color:#fff!important;color:var(--es-blue-900,#293F6D)!important;font-weight:600;
  border-left:4px solid var(--es-orange-500,#FA650D)!important}
ul.lhs .lhs-sub>.list-group-item span.fal,
ul.lhs .lhs-sub>.list-group-item span.fa{width:16px;text-align:center;color:rgba(255,255,255,.6)!important}
ul.lhs .lhs-sub>.list-group-item.selected span.fal,
ul.lhs .lhs-sub>.list-group-item.selected span.fa{color:var(--es-blue-800,#4265AF)!important}
ul.lhs .lhs-sub>.list-group-item.selected .badge{background:var(--es-blue-tint,#E7ECF6)!important;color:var(--es-blue-800,#4265AF)!important}

/* Count badges — translucent white pill, monospace */
ul.lhs .badge{background:rgba(255,255,255,.14)!important;color:#fff!important;font-weight:500;font-family:var(--es-font-mono)}
ul.lhs .lhs-sub .badge{margin-left:auto}

@media (prefers-reduced-motion:reduce){
  ul.lhs .lhs-sub,ul.lhs .greyArrow,ul.lhs .list-group-item{transition:none!important}
}

.es-matrix{border-collapse:collapse;font-family:var(--es-font-sans);font-size:13px}
.es-matrix th,.es-matrix td{border:.5px solid var(--es-grey-100,#E1E6EB);padding:8px 12px;text-align:center;white-space:nowrap}
.es-matrix thead th{background:var(--es-blue-900,#293F6D);color:#fff;font-weight:600;position:sticky;top:0;z-index:1}
.es-matrix thead th:first-child,.es-matrix tbody th{position:sticky;left:0;z-index:2;background:var(--es-blue-900,#293F6D);
  color:#fff;text-align:left;font-weight:600}
.es-matrix tbody th{background:#fff;color:var(--es-blue-900,#293F6D);border-right:.5px solid var(--es-grey-100,#E1E6EB)}
.es-matrix tbody td{font-family:var(--es-font-mono)}
.es-matrix .rag-green{background:var(--es-green-50,#D6F5D6);color:var(--es-green-700,#09630B)}
.es-matrix .rag-yellow{background:var(--es-yellow-50,#FEF4DC);color:var(--es-yellow-700,#9A6200)}
.es-matrix .rag-orange{background:var(--es-orange-50,#FEE8D8);color:var(--es-orange-600,#C14800)}
.es-matrix .rag-red{background:var(--es-red-50,#FDDCDC);color:var(--es-red-700,#A01010)}
.es-matrix .rag-info{background:var(--es-aqua-50,#DFF4FC);color:var(--es-aqua-700,#0673A1)}
.es-matrix .rag-muted{background:var(--es-grey-50,#F1F2F7);color:var(--es-grey-400,#9F9F9F)}

/* Header — 3-part flex on bg-navy */
.es-register-head{display:flex;align-items:flex-start;gap:16px;justify-content:space-between}
.es-register-head .title-block{flex:1 1 auto;min-width:0}
.es-register-head .title{font-weight:600;color:#fff;font-size:.9375rem;line-height:1.3}
.es-register-head .meta{color:rgba(255,255,255,.72);font-size:.8125rem;margin-top:2px}
.es-register-head .kbd-hint{margin-top:6px;color:rgba(255,255,255,.62);font-size:.8125rem;font-weight:400}
.es-register-head .lead-actions{flex:0 0 auto}
.es-register-head .trail-actions{display:flex;gap:8px;align-items:center;flex:0 0 auto;flex-wrap:wrap;justify-content:flex-end}
.btn.es-on-navy{color:#fff;border-color:rgba(255,255,255,.35);background:transparent}
.btn.es-on-navy:hover{background:rgba(255,255,255,.12);color:#fff}
/* Solid white chip for an action on a navy header. .bg-navy is --es-blue-800, so .btn-primary on it is 1:1 and .btn-aqua 1.7:1; white fill with blue-800 text is 5.6:1 for both the label and the chip. */
.btn.es-on-navy-solid{background:#fff;color:var(--es-blue-800);border-color:#fff;--bs-btn-border-width:1.5px}
.btn.es-on-navy-solid:hover,
.btn.es-on-navy-solid:focus-visible{background:#fff;color:var(--es-blue-800);border-color:#fff;opacity:.86}

/* Summary chips (the .es-chip name is taken — register uses .es-rchip) */
.es-chip-row{display:flex;flex-wrap:wrap;gap:12px;padding:10px 16px;
  background:var(--es-grey-50,#F1F2F7);border-bottom:.5px solid var(--es-border-subtle)}
.es-rchip{display:inline-flex;align-items:center;gap:8px;font-size:.8125rem;color:var(--es-text-body)}
.es-rchip-dot{width:10px;height:10px;border-radius:999px;background:var(--es-grey-400,#9F9F9F);flex:0 0 auto}
.es-rchip-dot.tone-green{background:var(--es-green-500)} .es-rchip-dot.tone-yellow{background:var(--es-yellow-500)}
.es-rchip-dot.tone-red{background:var(--es-red-500)}     .es-rchip-dot.tone-aqua{background:var(--es-aqua-500)}
.es-rchip-dot.tone-blue{background:var(--es-blue-800)}   .es-rchip-dot.tone-grey{background:var(--es-grey-400,#9F9F9F)}
.es-rchip-n{font-family:var(--es-font-mono);font-variant-numeric:tabular-nums;font-weight:600}

/* Learner rows */
.es-register-rows{display:flex;flex-direction:column}
.es-register-row{display:grid;grid-template-columns:auto 1fr auto auto;align-items:center;
  gap:16px;padding:10px 16px;min-height:56px;
  border-bottom:.5px solid var(--es-border-subtle);border-left:3px solid transparent;outline:none}
.es-register-row:last-child{border-bottom:0}
.es-register-row:hover{background:var(--es-blue-tint,#E7ECF6)}
.es-register-row:focus,.es-register-row.is-cursor{        /* the keyboard cursor */
  background:var(--es-blue-tint,#E7ECF6);border-left-color:var(--es-accent,#4265AF)}
.es-register-row .identity{min-width:0}
.es-register-row .name{color:var(--es-text-strong)}
.es-register-row .sub{font-size:.8125rem;color:var(--es-text-muted);margin-top:1px}
.es-register-row .sub .font-mono{font-family:var(--es-font-mono)}
.es-register-row .send-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:5px}
.es-send-chip{cursor:help}
.es-register-row .level-display{cursor:pointer;color:var(--es-blue-800);text-decoration:underline}

/* Code toggle group */
.es-codes{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end}
.es-code-btn{min-width:44px;min-height:44px;padding:0 10px;border-radius:999px;
  border:1.5px solid var(--es-border-input,#E1E6EB);background:transparent;
  color:var(--es-text-muted);font-weight:600;font-size:.8125rem;line-height:1;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;
  transition:opacity .14s var(--es-ease),background .14s var(--es-ease),border-color .14s var(--es-ease)}
.es-code-btn:hover{opacity:.86}
.es-code-btn:focus-visible{box-shadow:var(--es-focus-ring);border-color:var(--es-accent)}
.es-code-btn.active{border-color:transparent}   /* active fill + letter colour set inline from HighlightColour */

/* Notes button */
.es-note-btn{min-width:44px;min-height:44px;position:relative;color:var(--es-text-muted)}
.es-note-btn.has-note{color:var(--es-aqua-600,#0098D4)}
.es-note-btn.has-note::after{content:"";width:6px;height:6px;border-radius:999px;
  background:var(--es-aqua-500);position:absolute;top:9px;right:9px}

/* Empty state */
.es-register-empty{text-align:center;padding:40px 24px;color:var(--es-text-muted)}
.es-register-empty .fa-users{font-size:2rem;color:var(--es-grey-300,#C7CCD4);margin-bottom:12px}

/* Compact density (40+ learners) */
.es-register.compact .es-register-row{min-height:0;padding:6px 16px}
.es-register.compact .es-avatar{width:32px!important;height:32px!important;font-size:12px!important}
.es-register.compact .send-chips .es-send-chip .lbl{display:none}   /* icon-only chips */
.es-register.compact .es-register-head,
.es-register.compact .es-chip-row{position:sticky;top:0;z-index:5}

/* Narrow screens: stack codes under identity */
@media (max-width:768px){
  .es-register-row{grid-template-columns:auto 1fr auto}
  .es-codes{grid-column:1 / -1;justify-content:flex-start;margin-top:6px}
}

.es-rowbtn{
  display:inline-flex; align-items:center; gap:.4em; white-space:nowrap;
  font:600 .75rem/1 var(--es-font-sans); border-radius:.375rem;
  padding:.4375rem .8125rem; border:1.5px solid transparent; cursor:pointer;
  text-decoration:none; transition:opacity var(--es-dur) var(--es-ease),
    background var(--es-dur) var(--es-ease), border-color var(--es-dur) var(--es-ease);
}
.es-rowbtn:hover{ opacity:.86; text-decoration:none; }
.es-rowbtn:focus-visible{ box-shadow:var(--es-focus-ring); outline:none; }
.es-rowbtn>i{ font-size:.6875rem; }

/* CHANGE — low-emphasis aqua text button (verified / completed rows; also Re-invite, Add another course) */
.es-rowbtn--change{ background:transparent; border-color:transparent;
  color:var(--es-aqua-700,#0673A1); padding-inline:.5rem; }
.es-rowbtn--change:hover{ color:var(--es-aqua-700,#0673A1); text-decoration:underline; opacity:1; }

/* FIX THIS ISSUE / SET DATES — solid red, compact, trailing chevron (outstanding action) */
.es-rowbtn--fix{ background:var(--es-red-500); border-color:var(--es-red-500); color:#fff; }
.es-rowbtn--fix:hover{ color:#fff; }
.es-rowbtn--fix:active{ background:var(--es-red-700); border-color:var(--es-red-700); }

/* MARK AS COMPLETED — solid navy / primary (NOT red) */
.es-rowbtn--complete{ background:var(--es-blue-800); border-color:var(--es-blue-800); color:#fff;
  padding:.5625rem 1.125rem; font-size:.8125rem; }
.es-rowbtn--complete:hover{ color:#fff; }
.es-rowbtn--complete:active{ background:var(--es-accent-press); border-color:var(--es-accent-press); }

/* Enrolment decision workspace — green status check icons 50% larger (scoped, user request).
   scale() gives a true +50% of the rendered size whether the icon is base or fa-lg. */
.es-decision-workspace .fa-circle-check{ display:inline-block; transform:scale(1.5); transform-origin:center; }

:root{
  --es-blue-900-rgb: 41,63,109;
  --es-cover-backdrop: rgba(var(--es-blue-900-rgb), .35);
  --es-cover-backdrop-inline: rgba(255,255,255,.75);
  --es-cover-panel-bg: var(--es-grey-50, #F1F2F7);
  --es-cover-panel-width: 240px;
  --es-cover-radius: 10px;
  --es-cover-shadow: var(--es-shadow-md);
  --es-cover-anim: 500ms;
}

#cCover{ inset:0; width:100%; height:100%; z-index:1000;
  display:flex; align-items:center; justify-content:center; }
#cCover:not(.cover-small){ position:fixed; background-color:var(--es-cover-backdrop); }

#cCover.cover-small{ position:absolute; background-color:var(--es-cover-backdrop-inline); }

#cCover:not(.cover-small) #cCover_container{
  background-color:var(--es-cover-panel-bg); border-radius:var(--es-cover-radius);
  box-shadow:var(--es-cover-shadow); padding:20px; width:var(--es-cover-panel-width);
  display:flex; flex-direction:column; align-items:center; justify-content:center; }

#cCover:not(.cover-small) #cCover_icon{ display:inline-block; margin-bottom:.25em;
  width:70px; height:70px; text-align:center; }
#cCover.cover-small #cCover_icon{ font-size:3em; color:var(--es-grey-400,#9F9F9F); }

#cCover:not(.cover-small) #cCover_text{ display:block; text-align:center; }
#cCover.cover-small #cCover_text{ display:none; }

#cCover:not(.cover-small) #cCover_progressContainer{ margin:.5em 0 0; width:100%;
  overflow:visible; }

#cCover .cover-show{ animation-name:cover-show; animation-duration:var(--es-cover-anim); }
#cCover .cover-hide{ animation-name:cover-hide; animation-duration:var(--es-cover-anim);
  animation-fill-mode:forwards; }

@keyframes cover-show{ 0%{ opacity:0; } 100%{ opacity:1; } }
@keyframes cover-hide{ 0%{ opacity:1; } 100%{ opacity:0; } }

@media (prefers-reduced-motion: reduce){
  :root{ --es-cover-anim: 1ms; }
}

/* jQuery-validation states (validation.js toggles .error / label.error at runtime). */
.error:not(label){ background-color:var(--es-red-50,#FDDCDC);
  border:1px solid var(--es-red-500,#DE1F1F) !important; border-left-width:2px !important; font-weight:600; }
label.error{ color:var(--es-red-700,#A01010); margin-left:0; }
.error::placeholder{ color:var(--es-red-700,#A01010); }
.required{ border-left:2px solid var(--es-red-500,#DE1F1F) !important; font-weight:600; }
.required::placeholder{ color:var(--es-red-700,#A01010); }
.requireOneOf{ border-left:2px dashed var(--es-red-500,#DE1F1F) !important; font-weight:600; }

/* Stacked "input block" — joins a column of inputs into one bordered group. */
.input-block > input[type='text']:not(:first-of-type):not(:last-of-type),
.input-block > span:not(:first-of-type):not(:last-of-type),
.input-block > .input-group:not(:first-of-type):not(:last-of-type) > input[type='text'],
.input-block > .input-group:not(:first-of-type):not(:last-of-type) > .input-group-addon{
  border-top:0 !important; border-bottom:0 !important; border-radius:0 !important; }
.input-block > input[type='text']:first-of-type,
.input-block > span:first-of-type,
.input-block > .input-group:first-of-type > input[type='text'],
.input-block > .input-group:first-of-type > .input-group-addon{
  border-bottom:0 !important; border-bottom-left-radius:0 !important; border-bottom-right-radius:0 !important; }
.input-block > input[type='text']:last-of-type,
.input-block > span:last-of-type,
.input-block > .input-group:last-of-type > input[type='text'],
.input-block > .input-group:last-of-type > .input-group-addon{
  border-top:0 !important; border-top-left-radius:0 !important; border-top-right-radius:0 !important; }
.input-block > .input-group{ width:100%; }
.input-block > .input-group > .input-group-addon{ width:40px; text-align:center; }

/* Textarea word/character counters. */
.textarea-counters{ color:var(--es-grey-400,#9F9F9F); font-size:.8em; }
.textarea-counters > .word-count{ float:left; }
.textarea-counters > .character-count{ float:right; }

.table > tbody > tr > th{ background-color:var(--es-grey-100,#E1E6EB) !important;
  color:var(--es-blue-900,#293F6D); font-weight:600; }
.table > tbody > tr > th > a{ color:var(--es-blue-900,#293F6D); font-weight:400; }
.table:not(.table-condensed) > tbody > tr > td{ height:41px; line-height:20px; padding:10px 15px; }
.table:not(.table-condensed) > tbody > tr > th{ height:42px; line-height:20px; padding:10px 15px; }
.table.table-condensed > tbody > tr > td,
.table.table-condensed > tbody > tr > th{ padding:5px 15px; }
.table-hover > tbody > tr:hover > td{ background-color:var(--es-aqua-50,#DFF4FC) !important; cursor:pointer !important; }
.table-j-fix{ margin:0; border-bottom:0 !important; }
.table-j-fix.table-no-results{ padding:15px; margin-bottom:0 !important; border-top:1px solid var(--es-grey-100,#E1E6EB); }
.table-j-fix th a{ color:var(--es-blue-900,#293F6D); }

/* Wrap-free layout table (timeline.php / search look.php helper). */
.timeline-table{ width:100%; }
.timeline-table > tbody > tr > td{ vertical-align:top; }
.timeline-table > tbody > tr > th:not(:last-child),
.timeline-table > tbody > tr > td:not(:last-child){ white-space:nowrap; }
.timeline-table > tbody > tr > th:last-child,
.timeline-table > tbody > tr > td:last-child{ width:100%; }

/* File-upload chip list. */
.file-upload-list{ padding:0; margin:5px -5px; list-style:none; display:flex; flex-wrap:wrap; align-items:flex-start; }
.file-upload-list li{ margin:5px; padding:5px; display:flex; align-items:flex-start;
  background:var(--es-grey-50,#F1F2F7); border:1px solid var(--es-grey-100,#E1E6EB); border-radius:5px; }
.file-upload-list li .remove{ margin-right:10px; }

/* Vertical (stacked) dropdown-button group. */
.dd-btn-j .dropdown-menu{ top:0; min-width:auto; margin:0; padding:0; border:none; background:none;
  box-shadow:none; text-align:right; flex-direction:column; }
.dd-btn-j .open > .dropdown-menu{ display:flex; }
.dd-btn-j .dropdown-menu > button{ width:100%; margin:0 !important; padding:.5em .5em .5em .25em;
  border-radius:0; border-bottom-width:0; text-align:left; display:flex; align-items:center; }
.dd-btn-j .dropdown-menu > button:first-child{ border-top-left-radius:4px; border-top-right-radius:4px; }
.dd-btn-j .dropdown-menu > button:last-child{ border-bottom-left-radius:4px; border-bottom-right-radius:4px; }

.btn-group.float-end > .dropdown-menu{
  position:absolute !important;
  inset:100% 0 auto auto !important;    /* drop below the button; pin the menu's right edge to the button's right edge */
  transform:none !important;
  margin:.35rem 0 0 0 !important;       /* small gap below the ⋮ button */
  min-width:12rem;                      /* right edge is pinned, so it grows leftward — never toward the screen edge */
  padding:.35rem;
  flex-direction:column; gap:.35rem;
  border:1px solid var(--es-grey-100,#E1E6EB);
  border-radius:10px;
  background:#fff;
  box-shadow:var(--es-shadow-md,0 4px 12px rgba(41,63,109,.12));
  text-align:left;
  z-index:1030;
}
.btn-group.float-end > .dropdown-menu.show{ display:flex; }
.btn-group.float-end > .dropdown-menu > .btn{
  width:100%; margin:0; border-radius:6px;
  display:flex; align-items:center; justify-content:flex-start;
  text-align:left; white-space:nowrap;
}
.btn-group.float-end > .dropdown-menu > .btn > span:first-child{
  width:1.5em; flex:0 0 auto; text-align:center; margin-right:.4em;
}
/* Clicks land on the action button, never its icon/label span (so delegated
   handlers reading the button's data-* always fire). */
.btn-group.float-end > .dropdown-menu > .btn > *{ pointer-events:none; }

.es-table-scroll:has(.btn-group.float-end > .dropdown-menu.show),
.es-table-wrap:has(.btn-group.float-end > .dropdown-menu.show),
.table-responsive:has(.btn-group.float-end > .dropdown-menu.show),
.card:has(.btn-group.float-end > .dropdown-menu.show){
  overflow: visible;
}

.es-gototop{
  position:fixed; left:50%; bottom:1.25rem; z-index:1030;
  width:2.75rem; height:2.75rem;
  display:inline-flex; align-items:center; justify-content:center;
  border:1px solid #fff; border-radius:999px;
  background:var(--es-blue-800,#4265AF); color:#fff; font-size:1rem; line-height:1;
  box-shadow:var(--es-shadow-md,0 4px 12px rgba(10,26,47,.18));
  cursor:pointer;
  opacity:0; visibility:hidden; transform:translateX(-50%) translateY(8px); pointer-events:none;
  transition:opacity .16s cubic-bezier(.2,0,0,1), transform .16s cubic-bezier(.2,0,0,1), visibility .16s;
}
.es-gototop.is-visible{ opacity:1; visibility:visible; transform:translateX(-50%); pointer-events:auto; }
.es-gototop:hover{ opacity:.86; }
.es-gototop:focus-visible{ outline:none; box-shadow:var(--es-focus-ring); }
@media (prefers-reduced-motion: reduce){ .es-gototop{ transition:none; } }
@media print{ .es-gototop{ display:none !important; } }

/* Small muted group sub-label inside a card — a sub-label, NOT a heading. */
.es-form-grouphd{
  font-size:.8125rem; font-weight:500; color:var(--es-text-muted);
  margin-bottom:.75rem;
}

/* Single yes/no flag row: switch on the left, concept label to its right
   (Bootstrap's native .form-switch order). Hairline separators between rows. */
.es-toggle-row{
  padding:.5rem 0; border-top:1px solid var(--es-grey-100);
}
.es-toggle-row:first-of-type{ border-top:0; }
.es-toggle-row .form-check{ margin:0; min-height:auto; }
.es-toggle-row .form-check-label{ color:var(--es-text-body); }

/* Multi-select checkbox group (4+ items) → responsive 2-column grid. */
.es-check-grid{ display:grid; grid-template-columns:1fr; gap:.5rem .75rem; }
@media (min-width:768px){ .es-check-grid{ grid-template-columns:1fr 1fr; } }
.es-check-grid .form-check{ margin:0; }

.es-input-short{ max-width:220px; }
.es-input-xshort{ max-width:120px; }

.es-combo{ position:relative; }
/* Open panel — width-LOCKED to its own trigger (never wider than its column),
   overlays as an absolute layer so it never reflows or covers an adjacent field. */
.es-combo-panel{
  position:absolute; top:calc(100% + 2px); left:0;
  width:100%; max-width:100%; max-height:16rem; overflow-y:auto;
  z-index:1035; background:#fff;
  border:1px solid var(--es-grey-100); border-radius:8px;
  box-shadow:var(--es-shadow-md,0 4px 12px rgba(10,26,47,.12));
  padding:.25rem;
  /* No blank header/decorative row — options start immediately. Put a real
     <input class="es-combo-search"> here if the list is long enough to search. */
}
.es-combo-panel[hidden]{ display:none; }
.es-combo-search{
  width:100%; margin:.25rem 0 .35rem; padding:.375rem .6rem;
  font-size:.8125rem; border:1.5px solid var(--es-border-input); border-radius:6px;
}
/* Options — full-width rows, ≥40px touch target, long text wraps rather than
   widening the panel; hover/focus/active use the accent tint, not a grey block. */
.es-combo-option{
  display:flex; align-items:flex-start; gap:.5rem;
  min-height:2.5rem; padding:.5rem .75rem;
  font-size:.8125rem; color:var(--es-text-body); line-height:1.3;
  white-space:normal; border-radius:6px; cursor:pointer;
}
.es-combo-option:hover, .es-combo-option:focus, .es-combo-option.is-active{
  background:var(--es-aqua-50); outline:none;
}
/* Selected marked by weight (+ optional leading <i class="fa-solid fa-check">),
   never colour alone. */
.es-combo-option[aria-selected="true"]{ font-weight:600; }
.es-combo-option .es-combo-check{ flex:0 0 1em; color:var(--es-blue-800); }

.es-segmented{ display:flex; flex-wrap:wrap; gap:.375rem; align-items:center; }
.es-segmented label,
.es-segmented .radio-inline{
  position:relative; margin:0;
  display:inline-flex; align-items:center; justify-content:center;
  min-height:2.25rem; padding:.375rem .85rem;
  font-size:.8125rem; font-weight:500; color:var(--es-text-body);
  background:#fff; border:1.5px solid var(--es-border-input); border-radius:999px;
  cursor:pointer; white-space:nowrap;
  transition:background .12s cubic-bezier(.2,0,0,1), color .12s cubic-bezier(.2,0,0,1), border-color .12s cubic-bezier(.2,0,0,1);
}
/* Native radio hidden but present + focusable (keyboard/screen-reader intact). */
.es-segmented input[type="radio"]{
  position:absolute; width:1px; height:1px; margin:0; padding:0;
  opacity:0; pointer-events:none;
}
.es-segmented label:hover,
.es-segmented .radio-inline:hover{ border-color:var(--es-blue-600); }
/* Active pill = the label whose radio is checked. */
.es-segmented label:has(> input:checked),
.es-segmented .radio-inline:has(> input:checked){
  background:var(--es-blue-800); border-color:var(--es-blue-800); color:#fff;
}
/* Keyboard focus ring on the focused pill. */
.es-segmented label:has(> input:focus-visible),
.es-segmented .radio-inline:has(> input:focus-visible){
  box-shadow:var(--es-focus-ring);
}
.es-segmented .form-check{ padding:0; margin:0; min-height:auto; display:inline-flex; }
.es-segmented .form-check-input[type="radio"]:checked + .form-check-label{
  background:var(--es-blue-800); border-color:var(--es-blue-800); color:#fff;
}
.es-segmented .form-check-input[type="radio"]:focus-visible + .form-check-label{
  box-shadow:var(--es-focus-ring);
}

.es-tabs a{
  appearance:none; background:none; border:none; cursor:pointer;
  padding:9px 16px; margin-bottom:-2px; text-decoration:none;
  display:inline-flex; align-items:center; gap:7px; white-space:nowrap;
  font:600 .8125rem var(--es-font-sans); color:var(--es-text-muted);
  border-bottom:2px solid transparent;
}
.es-tabs a:hover{color:var(--es-blue-800); text-decoration:none}
.es-tabs a.active{color:var(--es-accent-press); border-bottom-color:var(--es-blue-800)}
/* A file can produce a dozen sheets, which is more than the row can hold. */
.es-tabs.es-tabs-wrap{flex-wrap:wrap}

/* Row count riding on each sheet tab. */
.es-tab-count{
  font:500 .6875rem var(--es-font-mono); padding:1px 7px; border-radius:999px;
  background:var(--es-grey-100); color:var(--es-grey-700);
}
.es-tabs a.active .es-tab-count{background:var(--es-aqua-50); color:var(--es-aqua-700,#0673A1)}

.es-tab-count-red,
.es-tabs a.active .es-tab-count-red{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:18px; height:18px; padding:0 6px; border-radius:999px;
  font:700 10px/1 var(--es-font-mono);
  background:var(--es-red-50,#FDDCDC); color:var(--es-red-700,#A01010);
  border:1px solid var(--es-red-500,#DE1F1F);
}

.ilrv-scroll{max-height:68vh; overflow:auto}
.ilrv-scroll>.es-table>thead>tr>th{position:sticky; top:0; z-index:2}

/* Code meaning as a subtitle under the raw value, so the value itself stays
   scannable down the column. Nothing equivalent exists in the DS. */
.ilrv-code{
  display:block; font:400 .6875rem/1.2 var(--es-font-sans);
  color:var(--es-grey-400); margin-top:1px;
}

/* Row-number gutter — an ordinal, not data, so it is muted and monospaced. */
.ilrv-rownum{
  width:3.5rem; text-align:right;
  font-family:var(--es-font-mono); font-size:12.5px; color:var(--es-grey-400);
}

.ilrv-blank{color:var(--es-grey-300,#C7CCD4)}

.ilrv-nothing{
  padding:2rem 1rem; text-align:center; white-space:normal;
  color:var(--es-grey-400);
}

@media print{
  .ilrv-noprint{display:none}
  .ilrv-scroll{max-height:none; overflow:visible}
  .ilrv-scroll>.es-table>thead>tr>th{position:static}
}

.value-picker .vp-head{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:8px;
}
.value-picker .vp-title{
  font-weight:600; font-size:.9375rem; color:var(--es-blue-900);
}
.value-picker .vp-pool{
  background:var(--es-grey-50); border:1px solid var(--es-grey-100);
  border-radius:8px; padding:16px 18px;
}
.value-picker .vp-pool-head{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
}
.value-picker .vp-pool-title{
  font-weight:600; font-size:.8125rem; color:var(--es-blue-900);
}
.value-picker .vp-pool-count{
  background:var(--es-blue-tint); color:var(--es-blue-800);
  border-radius:999px; padding:2px 10px; font-size:.6875rem; font-weight:600;
}
.value-picker .vp-pool-meta{
  font-size:.8125rem; color:var(--es-text-muted);
}
/* Orange-600, not the .btn-orange orange-500: white on orange-500 is ~3.0:1 and fails AA at this size. Scoped here rather than changed globally. */
.value-picker .vp-edit{
  margin-left:auto;
  --bs-btn-bg:var(--es-orange-600); --bs-btn-border-color:var(--es-orange-600);
  --bs-btn-hover-bg:var(--es-orange-600); --bs-btn-hover-border-color:var(--es-orange-600);
  --bs-btn-active-bg:var(--es-orange-600); --bs-btn-color:#fff; --bs-btn-hover-color:#fff;
  min-height:34px;
}
.value-picker .vp-pool-body:not(:empty){ margin-top:14px; }
.value-picker .vp-pool-empty{
  margin:14px 0 0; font-size:.8125rem; color:var(--es-text-muted);
}
.value-picker .vp-pool-group + .vp-pool-group{ margin-top:12px; }
.value-picker .vp-pool-group-head{
  display:flex; align-items:center; gap:8px; margin-bottom:6px;
  font:600 .6875rem/1 var(--es-font-sans); letter-spacing:.12em; text-transform:uppercase;
  color:var(--es-text-muted);
}
.value-picker .vp-pool-group-head .font-mono{
  letter-spacing:0; color:var(--es-blue-800); font-size:.6875rem;
}
.vp-pool-chips{ display:flex; flex-wrap:wrap; gap:6px; }

.vp-chip{
  display:inline-flex; align-items:center; gap:8px; max-width:340px;
  background:var(--es-white); border:1px solid var(--es-grey-100);
  border-radius:999px; padding:6px 12px; font-size:.8125rem; color:var(--es-text-body);
}
.vp-chip-code{ font-size:.6875rem; font-weight:600; color:var(--es-blue-900); flex:0 0 auto; }
.vp-chip-label{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.vp-chip-remove{
  flex:0 0 auto; width:20px; height:20px; padding:0; border:0; border-radius:50%;
  background:var(--es-red-500); color:#fff; font-size:.625rem; line-height:1;
  display:inline-flex; align-items:center; justify-content:center;
  transition:opacity var(--es-dur) var(--es-ease);
}
.vp-chip-remove:hover{ opacity:.86; }

.vp-modal .modal-dialog{ max-width:1120px; }
.vp-modal .modal-content{ height:88vh; }
.vp-modal .modal-header{ align-items:flex-start; gap:16px; }
.vp-modal .vp-modal-heading{ flex:1 1 auto; min-width:0; }
.vp-modal .vp-subtitle{
  margin:2px 0 0; font-size:.8125rem; color:rgba(255,255,255,.78);
}
.vp-modal .vp-modal-state{
  display:flex; flex-direction:column; align-items:flex-end; gap:2px;
  font-size:.75rem; color:#fff; white-space:nowrap;
}
.vp-modal .vp-state-drift{ color:rgba(255,255,255,.78); }

/* Tier 1 of the scroll model: the modal body scrolls without a visible bar, so the only scrollbar on screen is the values grid's. The wheel is routed here by value-picker.js. */
.vp-modal .modal-body{
  display:flex; flex-direction:column; gap:14px;
  overflow-y:auto; overscroll-behavior:contain;
  scrollbar-width:none; -ms-overflow-style:none;
}
.vp-modal .modal-body::-webkit-scrollbar{ width:0; height:0; }

.vp-modal .vp-controls{ display:flex; align-items:center; gap:10px; }
.vp-modal .vp-search-wrap{ position:relative; flex:1 1 auto; }
.vp-modal .vp-search-wrap>[class*="fa-"]{
  position:absolute; left:12px; top:50%; transform:translateY(-50%);
  color:var(--es-grey-400); pointer-events:none;
}
.vp-modal .vp-search{ padding-left:36px; }

.vp-modal .vp-cats{ display:flex; flex-wrap:wrap; gap:6px; }
.vp-modal .vp-cat{
  display:inline-flex; align-items:center; gap:6px; white-space:nowrap;
  background:var(--es-white); border:1.5px solid var(--es-grey-100);
  border-radius:999px; padding:6px 14px; min-height:32px;
  font:600 .75rem/1 var(--es-font-sans); color:var(--es-blue-800);
  transition:background-color var(--es-dur) var(--es-ease), border-color var(--es-dur) var(--es-ease);
}
.vp-modal .vp-cat:hover{ background:var(--es-grey-50); }
.vp-modal .vp-cat.active{
  background:var(--es-blue-800); border-color:var(--es-blue-800); color:#fff;
}
.vp-modal .vp-cat .font-mono{ font-size:.6875rem; opacity:.8; }

.vp-modal .vp-meta{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  font-size:.8125rem; color:var(--es-text-muted);
}
.vp-modal .vp-bulk{ display:flex; gap:6px; margin-left:auto; }
.vp-modal .vp-select-all{
  background:var(--es-white); border:1.5px solid var(--es-aqua-600); color:var(--es-aqua-700);
  font-weight:600;
}
.vp-modal .vp-deselect-all,
.vp-modal .vp-clear-all{
  background:var(--es-white); border:1.5px solid var(--es-red-500); color:var(--es-red-700);
  font-weight:600;
}

/* Tier 2: the values grid keeps its scrollbar. overflow-y is `scroll`, not `auto`, so the list does not jump sideways as a search narrows it. */
.vp-modal .vp-list{
  display:grid; grid-template-columns:repeat(2, minmax(0,1fr));
  height:46vh; min-height:200px; overflow-y:scroll; overscroll-behavior:contain;
  border:1px solid var(--es-grey-100); border-radius:8px; scrollbar-width:thin;
  /* The modal body is a flex column; without this the grid is squeezed instead of the body scrolling. */
  flex:0 0 auto;
}
.vp-modal .vp-row{
  display:flex; align-items:center; gap:11px; margin:0; padding:10px 14px;
  border-bottom:1px solid var(--es-grey-100); cursor:pointer;
  transition:background-color var(--es-dur) var(--es-ease);
}
.vp-modal .vp-row:hover{ background:var(--es-grey-50); }
/* Selection is never colour alone -- the tint is there so a ticked row survives peripheral vision. */
.vp-modal .vp-row--on{ background:var(--es-blue-tint); }
.vp-modal .vp-row input[type="checkbox"]{ flex:0 0 auto; margin:0; accent-color:var(--es-blue-800); }
.vp-modal .vp-code{
  flex:0 0 auto; min-width:66px; font-size:.75rem; font-weight:600; color:var(--es-blue-900);
}
.vp-modal .vp-label{ min-width:0; font-size:.8125rem; }
.vp-modal .vp-empty{
  padding:1rem; text-align:center; font-size:.8125rem; color:var(--es-text-muted);
}

.vp-modal .vp-draft{
  background:var(--es-grey-50); border:1px solid var(--es-grey-100);
  border-radius:8px; padding:12px 14px; flex:0 0 auto;
}
.vp-modal .vp-draft-head{
  display:flex; align-items:center; gap:10px; margin-bottom:8px;
  font:600 .8125rem/1 var(--es-font-sans); color:var(--es-blue-900);
}
.vp-modal .vp-clear-all{ margin-left:auto; }
.vp-modal .vp-draft-chips{ display:flex; flex-wrap:wrap; gap:6px; max-height:96px; overflow-y:auto; }
.vp-modal .vp-draft-empty{ font-size:.8125rem; color:var(--es-text-muted); }

.vp-modal .modal-footer{ gap:10px; }
.vp-modal .vp-footer-note{
  flex:1 1 auto; min-width:0; margin-right:auto;
  font-size:.75rem; color:var(--es-text-muted);
}
/* In a flex-end footer next to a note, buttons squeeze below their label width and the text wraps. */
.vp-modal .modal-footer .btn{ white-space:nowrap; flex-shrink:0; }

/* Folded into the existing card footer rather than a second floating bar: the footer is the AJAX insertion anchor, and .card is overflow:hidden, which stops position:sticky on a child. */
#pageForm .vp-total{
  margin-right:auto; font-size:.8125rem; color:var(--es-text-muted);
}

@media (max-width: 1199.98px){
  .vp-modal .vp-list{ grid-template-columns:minmax(0,1fr); }
}
@media (max-width: 767.98px){
  .value-picker .vp-edit{ margin-left:0; width:100%; }
  .vp-modal .modal-content{ height:92vh; }
  .vp-modal .vp-controls{ flex-wrap:wrap; }
}

.es-contract-edit .card-body > .row{ margin-bottom:.875rem; row-gap:.875rem; }
.es-contract-edit .card-body > .row:last-child{ margin-bottom:0; }
.es-contract-edit .form-check{ margin-bottom:.5rem; }
.es-contract-edit .form-check:last-child{ margin-bottom:0; }

/* The base fill is AT WORK, NOTHING BOOKED -- scheduled that day and available. Standard blue,
   so the grids read: blue at work, a status colour booked, grey not working that day. */
.hr-cell{ display:inline-block; width:100%; height:100%; min-width:9px; min-height:9px;
          border-radius:2px; background:var(--es-blue-800); color:#fff; }
.hr-cell-approved      { background:var(--es-green-500); }
.hr-cell-pending       { background:var(--es-yellow-500); }
.hr-cell-cancelpending,
.hr-cell-cancel_pending{ background:var(--es-orange-500); }
.hr-cell-rejected      { background:var(--es-red-50); border:1px solid var(--es-red-500); }
.hr-cell-cancelled     { background:var(--es-grey-100); }
.hr-cell-holiday       { background:repeating-linear-gradient(45deg,
                             var(--es-aqua-50) 0 3px, var(--es-grey-50) 3px 6px); }
/* Not working that day at all -- no pattern row. Grey, because nothing is expected of it. */
.hr-cell-unscheduled   { background:var(--es-grey-100); }

.hr-legend{ display:flex; flex-wrap:wrap; gap:16px; margin-top:12px; font-size:.8125rem;
            color:var(--es-grey-700); }
.hr-legend-item{ display:inline-flex; align-items:center; gap:6px; }
.hr-legend-item .hr-cell{ width:12px; height:12px; min-width:12px; flex:0 0 12px; }

.hr-month{ display:grid; grid-template-columns:repeat(7, 1fr); gap:4px; }
.hr-month-head{ font-size:.6875rem; letter-spacing:.12em; text-transform:uppercase;
                color:var(--es-grey-400); padding:4px 2px; text-align:center; }
.hr-month-cell{ min-height:84px; border:.5px solid var(--es-grey-100); border-radius:6px;
                padding:4px; background:#fff; }
.hr-month-blank{ border:none; background:transparent; }
.hr-month-cell.is-today{ border:1.5px solid var(--es-blue-800); }
.hr-month-cell.is-holiday{ background:var(--es-aqua-50); }
.hr-month-num{ display:block; font-size:.75rem; color:var(--es-grey-400); margin-bottom:2px; }
.hr-chip{ display:block; font-size:.6875rem; line-height:1.3; padding:1px 4px; border-radius:999px;
          margin-bottom:2px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.hr-chip-leave  { background:var(--es-green-50, #E4F5E4); color:var(--es-green-700, #1B7A1D); }
.hr-chip-event  { background:var(--es-aqua-50);  color:var(--es-aqua-700, #0673A1); }
.hr-chip-crm    { background:var(--es-blue-50, #E7EDF8); color:var(--es-blue-900); }
.hr-chip-holiday{ background:var(--es-grey-100); color:var(--es-grey-700); }

.hr-year{ display:grid; grid-template-columns:repeat(4, 1fr); gap:16px; }
.hr-year-title{ font-size:.75rem; font-weight:600; color:var(--es-blue-900); margin-bottom:4px; }
.hr-year-days{ display:grid; grid-template-columns:repeat(7, 1fr); gap:2px; }
/* One 26px cell per day, split AM | PM — the ancestor page's shape, kept deliberately. */
.hr-year-head{ font-size:.5625rem; text-align:center; color:var(--es-grey-400);
               text-transform:uppercase; letter-spacing:.04em; }
.hr-blank{ visibility:hidden; }
.hr-day{ display:flex; flex-direction:column; gap:1px; min-height:26px; }
.hr-num{ font-size:.5625rem; line-height:1.1; text-align:center; color:var(--es-grey-700);
         font-variant-numeric:tabular-nums; }
.hr-day.is-quiet .hr-num{ color:var(--es-grey-400); }
.hr-slots{ display:flex; flex-direction:column; gap:1px; flex:1 1 auto; min-height:12px; }
.hr-slots .hr-cell{ flex:1 1 50%; }
/* An adjusted day is marked, not recoloured: the leave status underneath still has to read. */
.hr-day.is-override{ outline:1.5px solid var(--es-orange-500); outline-offset:1px; border-radius:3px; }

@media (max-width: 991.98px){ .hr-year{ grid-template-columns:repeat(2, 1fr); } }
@media (max-width: 575.98px){ .hr-year{ grid-template-columns:1fr; } }

.hr-strip-wrap{ overflow-x:auto; }
.hr-strip{ border-collapse:separate; border-spacing:2px; font-size:.75rem; }
.hr-strip th{ font-weight:500; color:var(--es-grey-700); padding:2px 6px; white-space:nowrap; }
.hr-strip thead th{ text-align:center; color:var(--es-grey-400); font-size:.6875rem; }
.hr-strip-dow{ display:block; }
.hr-strip-num{ display:block; font-weight:600; color:var(--es-grey-700); }
.hr-strip tbody td{ display:table-cell; width:22px; height:22px; text-align:center;
                    vertical-align:middle; border-radius:3px; font-weight:600;
                    font-size:.6875rem; color:var(--es-blue-900); }
.hr-strip tbody td.hr-cell               { background:var(--es-blue-800); color:#fff; }
.hr-strip tbody td.hr-cell-approved      { background:var(--es-green-500); color:#fff; }
.hr-strip tbody td.hr-cell-pending       { background:var(--es-yellow-500);
                                           color:var(--es-blue-900); }
.hr-strip tbody td.hr-cell-cancel_pending{ background:var(--es-orange-500); color:#fff; }
.hr-strip tbody td.hr-cell-unscheduled   { background:var(--es-grey-100);
                                           color:var(--es-text-muted); }
.hr-strip tfoot .hr-cover{ text-align:center; font-weight:600; font-size:.6875rem;
                           color:var(--es-grey-700); background:var(--es-grey-50); border-radius:3px; }
/* Short cover is red AND carries the count as text — never colour alone. */
.hr-strip tfoot .hr-cover.is-short{ background:var(--es-red-50, #FDDCDC);
                                    color:var(--es-red-700, #A01010); }

.hr-chip-toggle{ display:inline-flex; align-items:center; gap:6px; padding:4px 10px;
                 border:1.5px solid var(--es-grey-100); border-radius:999px; font-size:.8125rem;
                 cursor:pointer; }
.hr-chip-toggle:has(input:checked){ border-color:var(--es-orange-500);
                                    background:var(--es-orange-50, #FFEDE0); }

#hrStaffTable tbody tr{ cursor:pointer; }
.hr-staff-open{ font:inherit; color:var(--es-blue-800); text-decoration:none;
                border:0; background:none; text-align:left; }
.hr-staff-open:hover,
.hr-staff-open:focus{ color:var(--es-blue-900); text-decoration:underline; }

.hr-next{ display:grid; grid-template-columns:1fr auto; gap:2px 8px; padding:8px 10px;
          border:.5px solid var(--es-grey-100); border-radius:8px; text-decoration:none;
          color:var(--es-grey-700); }
.hr-next:hover,
.hr-next:focus{ background:var(--es-aqua-50); color:var(--es-blue-900); }
.hr-next-title { font-weight:600; color:var(--es-blue-900); }
.hr-next-when  { grid-column:1; font-size:.8125rem; color:var(--es-grey-400); }
.hr-next-status{ grid-row:1 / span 2; grid-column:2; align-self:center; }

/* The linked row marks itself, so arriving from Staff home lands somewhere obvious. */
.es-table tr:has(.hr-request:target){ background:var(--es-aqua-50); }

.hr-timeline-scroll{ overflow-x:auto; }
.hr-timeline{ min-width:720px; }
.hr-timeline-row{ display:grid; grid-template-columns:200px 1fr 64px 96px; gap:12px;
                  align-items:center; padding:4px 0; }
.hr-timeline-head{ padding-bottom:0; }
.hr-timeline-name{ display:block; font-weight:600; font-size:.8125rem;
                   color:var(--es-blue-900); }
.hr-timeline-meta{ display:block; font-size:.6875rem; color:var(--es-aqua-700, #0673A1); }
.hr-timeline-track{ position:relative; height:30px; border-radius:6px;
                    background:var(--es-grey-50); }
.hr-timeline-track.is-ruler{ height:18px; background:transparent; }
.hr-timeline-tick{ position:absolute; top:0; transform:translateX(-50%); font-size:.625rem;
                   color:var(--es-grey-400); white-space:nowrap; }
.hr-timeline-bar{ position:absolute; top:3px; bottom:3px; display:flex; align-items:center;
                  justify-content:center; border:1.5px solid var(--es-aqua-500);
                  background:var(--es-aqua-50); border-radius:6px; font-size:.75rem;
                  font-weight:600; color:var(--es-blue-900); overflow:hidden;
                  white-space:nowrap; }
.hr-timeline-bar.is-off{ border-color:var(--es-grey-100); background:var(--es-grey-100);
                         color:var(--es-grey-700); font-weight:400; }
.hr-timeline-none{ position:absolute; left:10px; top:50%; transform:translateY(-50%);
                   font-size:.75rem; color:var(--es-grey-400); }
.hr-timeline-hours{ text-align:right; font-size:.75rem; color:var(--es-grey-700); }
.hr-timeline-state{ text-align:right; }

@media (max-width: 767.98px){
    .hr-timeline-row{ grid-template-columns:140px 1fr 56px 84px; gap:8px; }
}

.hr-working{ font-size:.8125rem; margin-bottom:0; }
.hr-working th,
.hr-working td{ vertical-align:middle; white-space:nowrap; }
.hr-working-dow{ display:block; font-size:.6875rem; letter-spacing:.12em;
                 text-transform:uppercase; color:var(--es-grey-400); }
.hr-working-num{ display:block; font-weight:600; color:var(--es-blue-900); }
.hr-working-cell{ text-align:center; font-variant-numeric:tabular-nums; }
.hr-working-cell.is-working    { color:var(--es-grey-700); }
.hr-working-cell.is-off        { background:var(--es-aqua-50); color:var(--es-aqua-700, #0673A1); }
.hr-working-cell.is-unscheduled{ background:var(--es-grey-100); color:var(--es-text-muted); }

.hr-pattern{ font-size:.8125rem; margin-bottom:0; }
.hr-pattern th,
.hr-pattern td{ vertical-align:middle; white-space:nowrap; padding:6px 8px; }
.hr-pattern input[type="time"]{ min-width:112px; }
.hr-pattern input[type="number"]{ max-width:88px; }
.hr-pattern select{ min-width:132px; }

/* ============================================================ §12 helpdesk conversation ===== */

.es-msg{
    border:.5px solid var(--es-grey-100);
    border-radius:8px;
    padding:12px 14px;
    margin-bottom:12px;
    background:#fff;
}
.es-msg:last-child{ margin-bottom:0; }

/* An agent reply reads as "ours": tinted well, so the thread alternates without colour-coding. */
.es-msg.is-agent{ background:var(--es-grey-50); }

/* The one exception to "no coloured left borders outside Alerts" would be wrong here, so an
   internal note is marked by its badge and a dashed edge instead of a rule. */
.es-msg.is-private{ border-style:dashed; border-color:var(--es-orange-500); }

.es-msg-head{
    display:flex;
    align-items:center;
    gap:8px;
    flex-wrap:wrap;
    margin-bottom:8px;
}
.es-msg-who{ font-weight:600; color:var(--es-blue-900); }
.es-msg-when{ margin-left:auto; font-size:.8125rem; color:var(--es-grey-400); }
.es-msg-body{
    font-size:.9375rem;
    color:var(--es-grey-700);
    white-space:normal;
    overflow-wrap:anywhere;
}

/* ============================================================ §13 disclosure + leave ========= */

/* A shut-by-default panel for an occasional act on a screen that is mostly for reading.
   The summary is the control, so it carries the focus ring and the hit area, not the marker. */
.es-disclosure                { border:.5px solid var(--es-border-subtle); border-radius:10px;
                                background:var(--es-white); }
.es-disclosure > summary      { list-style:none; cursor:pointer; padding:12px 16px;
                                font-weight:600; font-size:.9375rem; color:var(--es-blue-900);
                                display:flex; align-items:center; gap:10px; border-radius:10px; }
.es-disclosure > summary::-webkit-details-marker { display:none; }
/* A real <i>, not a ::after content code: a mistyped font-family renders a tofu box. */
.es-disclosure > summary .es-chevron { margin-left:auto; font-size:.75rem;
                                       color:var(--es-grey-400);
                                       transition:transform .14s cubic-bezier(.2,0,0,1); }
.es-disclosure[open] > summary .es-chevron { transform:rotate(180deg); }
.es-disclosure > summary:hover{ background:var(--es-grey-50); }
.es-disclosure > summary:focus-visible{ outline:none; box-shadow:var(--es-focus-ring); }
.es-disclosure > div          { padding:0 16px 16px; }
/* The card inside a disclosure is already framed by the disclosure itself. */
.es-disclosure > div > .card  { border:0; box-shadow:none; }

.hr-timeline-bar.is-leave     { border-color:var(--es-hr-leave);
                                background:var(--es-hr-leave-50);
                                color:var(--es-hr-leave-700); }
.hr-working-cell.is-leave     { background:var(--es-hr-leave-50); color:var(--es-hr-leave-700); }
.es-status.tone-leave > .es-dot,
.hr-legend-swatch.is-leave    { background:var(--es-hr-leave); }

/* A day nobody is scheduled on. Read from the patterns, never from the weekday -- a Saturday
   somebody works is an ordinary column, and the weekend is only ever the usual case of this. */
.hr-strip th.is-closed        { background:var(--es-grey-50); color:var(--es-text-muted); }
.hr-strip th.is-closed .hr-strip-num { color:var(--es-text-muted); }
/* Empty on purpose: there is nothing to be available for, so no number to print. */
.hr-strip-closed              { background:var(--es-grey-50); border-radius:3px; }

/* Pinned on all three rows: width on a td is only a preference, so an empty cell let its column
   collapse and handed the slack to its neighbours. First column is the name, so exempt. */
.hr-strip thead th:not(:first-child),
.hr-strip tbody td,
.hr-strip tfoot td            { width:24px; min-width:24px; max-width:24px; padding:2px 0; }

/* Today, so a month-long strip says where you are in it without counting columns. */
.hr-strip th.is-today         { background:var(--es-aqua-50); color:var(--es-blue-900);
                                box-shadow:inset 0 -2px 0 var(--es-aqua-500); }
.hr-strip th.is-today .hr-strip-num { color:var(--es-blue-900); }

.hr-strip tbody td.hr-strip-split { padding:0; background:transparent; line-height:0; }
.hr-strip-split > .hr-cell    { display:block; width:100%; height:10px; margin:0 0 2px;
                                border-radius:2px; font-size:.5625rem; font-weight:600;
                                line-height:10px; text-align:center; color:#fff; }
.hr-strip-split > .hr-cell:last-child { margin-bottom:0; }
/* Yellow needs dark text; the whole-cell rules above make the same call. */
.hr-strip-split > .hr-cell-pending     { color:var(--es-blue-900); }
.hr-strip-split > .hr-cell-unscheduled { color:var(--es-text-muted); }

.hr-strip tfoot .hr-cover.is-split { padding:0; background:transparent; }
.hr-cover-half                { display:block; height:10px; line-height:10px; margin:0 0 2px;
                                border-radius:2px; font-size:.5625rem;
                                background:var(--es-grey-50); color:var(--es-grey-700); }
.hr-cover-half:last-child     { margin-bottom:0; }
.hr-cover-half.is-short       { background:var(--es-red-50, #FDDCDC);
                                color:var(--es-red-700, #A01010); }

.hr-strip tfoot .hr-cover-rule td { width:auto; min-width:0; max-width:none; height:2px;
                                    padding:0; background:var(--es-hr-cover-frame); }
.hr-strip tfoot .hr-cover-row > th,
.hr-strip tfoot .hr-cover-row > td { background:var(--es-grey-50); }
.hr-strip tfoot .hr-cover-row > th:first-child { font-weight:600; color:var(--es-blue-900);
                                    border-left:2px solid var(--es-hr-cover-frame); }
.hr-strip tfoot .hr-cover-row > td:last-child  {
                                    border-right:2px solid var(--es-hr-cover-frame); }

/* Where one month ends and the next begins, for a strip read a whole year wide. */
.hr-strip th.is-month-start   { box-shadow:inset 2px 0 0 var(--es-grey-100); }
.hr-strip th.is-today.is-month-start { box-shadow:inset 2px 0 0 var(--es-grey-100),
                                                   inset 0 -2px 0 var(--es-aqua-500); }

/* The month a run of columns belongs to, above them. A year-wide strip is otherwise 365 numbered
   columns with nothing saying where March is. */
.hr-strip thead .hr-strip-months th { width:auto; min-width:0; max-width:none; padding:0 0 3px;
                                text-align:left; font-size:.6875rem; font-weight:600;
                                color:var(--es-blue-900); white-space:nowrap; overflow:hidden;
                                box-shadow:inset 2px 0 0 var(--es-grey-100); }
.hr-strip thead .hr-strip-months th:first-child { box-shadow:none; }

.hr-strip th:first-child      { position:sticky; left:0; z-index:2;
                                background:var(--es-white); }
.hr-strip thead th:first-child,
.hr-strip tfoot .hr-cover-row > th:first-child { z-index:3; }
.hr-strip tbody th:first-child{ box-shadow:1px 0 0 var(--es-grey-100); }

/* Who leads the team, on the row the ordering already puts first. */
.hr-strip-lead                { display:inline-block; margin-left:4px; padding:0 5px;
                                border-radius:999px; background:var(--es-aqua-50);
                                color:var(--es-blue-900); font-size:.5625rem; font-weight:600;
                                letter-spacing:.06em; text-transform:uppercase; }

/* ============================================================ §14 verification progress ====== */
/* One segment per verification still standing between an enrolment and being moved on. Segments
   rather than one filled bar: a percentage would say how many are done while hiding which. */
.es-vprogress                 { display:flex; gap:8px; width:100%; align-items:flex-end; }
.es-vprogress-item            { flex:1 1 0; min-width:0; display:flex; flex-direction:column; gap:5px; }
.es-vprogress-label           { font-size:.625rem; font-weight:600; line-height:1.25; text-align:center;
                                letter-spacing:.03em; color:var(--es-grey-400, #9F9F9F);
                                overflow-wrap:anywhere; text-wrap:balance; }
.es-vprogress-seg             { display:block; height:8px; border-radius:999px;
                                background:var(--es-grey-100, #E1E6EB); }
.es-vprogress-seg--met        { background:var(--es-green-500, #27AC2A); }
.es-vprogress-seg--due        { background:var(--es-red-500, #DE1F1F); }

/* The overlay host, for two-column sub-tasks: lg is 800px and even xl only 1140. Capped so it does
   not stretch to nonsense on an ultrawide. */
.modal-dialog.modal-wide       { max-width:min(1600px, calc(100vw - 3rem)); }

/* Turned rather than swapped for another glyph, so open and shut are one element. */
.es-collapse-caret            { transition:transform .15s cubic-bezier(.2,0,0,1); }
[aria-expanded="true"] > .es-collapse-caret { transform:rotate(90deg); }

/* The answer a "Change" link landed on. Cells as well as the row: .table-striped paints
   `tbody tr > *`, which would cover a row background on every other one. */
.es-focus-answer,
.es-focus-answer > td         { animation:esFocusAnswer 2.4s cubic-bezier(.2,0,0,1) forwards; }
@keyframes esFocusAnswer      { 0%, 45% { background-color:var(--es-aqua-50, #DFF4FC); }
                                100%    { background-color:transparent; } }
@media (prefers-reduced-motion: reduce) {
    .es-focus-answer,
    .es-focus-answer > td     { animation:none; background-color:var(--es-aqua-50, #DFF4FC); }
}

/* ============================================================ §15 list filter bar ============ */
.es-fbar                      { display:flex; align-items:center; flex-wrap:wrap; gap:8px;
                                padding:9px 14px; background:var(--es-grey-50, #F1F2F7);
                                border-bottom:.5px solid var(--es-border-subtle); }

/* A bar with no card to sit inside — the CRM support queue and dev board render their grids bare
   on purpose, and a grey bar on the grey page would have no edges. So it brings its own shell. */
.es-fbar--bare                { background:#fff; border:.5px solid var(--es-border-subtle);
                                border-radius:10px; margin-bottom:12px; }

/* Quick-find */
.es-fbar-find                 { position:relative; flex:0 1 300px; min-width:170px; }
.es-fbar-find > i             { position:absolute; left:11px; top:50%; transform:translateY(-50%);
                                font-size:12px; color:var(--es-grey-400, #9F9F9F); pointer-events:none; }
.es-fbar-find > input         { width:100%; height:34px; box-sizing:border-box; padding:0 11px 0 30px;
                                border:1.5px solid var(--es-border-input, #E1E6EB); border-radius:6px;
                                background:#fff; font:400 13px var(--es-font-sans);
                                color:var(--es-grey-700, #4D4D4D); outline:none; }
.es-fbar-find > input:focus   { border-color:var(--es-accent); box-shadow:var(--es-focus-ring); }
/* Both boxes are type=search for the native clear button; Safari would otherwise round them. */
.es-fbar-find > input,
.es-fbar-search               { -webkit-appearance:none; appearance:none; }

.es-fbar-go                   { height:34px; padding:0 13px; flex:none; border-radius:6px;
                                border:1.5px solid var(--es-accent); background:var(--es-accent);
                                color:#fff; font:600 13px var(--es-font-sans); cursor:pointer;
                                white-space:nowrap; transition:opacity .12s var(--es-ease); }
.es-fbar-go:hover             { opacity:.86; }
.es-fbar-go:focus-visible     { box-shadow:var(--es-focus-ring); }

/* Facet trigger. Aqua once it carries a selection — the same language as the active-filter chips
   in §9; orange stays reserved for nav chrome. */
.es-fbar-facet                { position:relative; }
.es-fbar-facet > summary      { display:inline-flex; align-items:center; gap:7px; height:34px;
                                padding:0 11px; border:1.5px solid var(--es-border-input, #E1E6EB);
                                border-radius:6px; background:#fff; cursor:pointer; list-style:none;
                                white-space:nowrap; font:600 13px var(--es-font-sans);
                                color:var(--es-grey-700, #4D4D4D);
                                transition:background .12s var(--es-ease), border-color .12s var(--es-ease); }
.es-fbar-facet > summary::-webkit-details-marker { display:none; }
.es-fbar-facet > summary::marker { content:""; }
.es-fbar-facet > summary:hover{ background:var(--es-grey-50, #F1F2F7); border-color:var(--es-grey-300, #C7CCD4); }
.es-fbar-facet > summary:focus-visible { box-shadow:var(--es-focus-ring); border-color:var(--es-accent); }
.es-fbar-facet.is-on > summary{ border-color:var(--es-aqua-500, #00AEEF);
                                background:var(--es-aqua-50, #DFF4FC); color:var(--es-aqua-700, #0673A1); }
.es-fbar-caret                { font-size:9px; color:var(--es-grey-400, #9F9F9F);
                                transition:transform .14s var(--es-ease); }
.es-fbar-facet.is-on > summary .es-fbar-caret { color:var(--es-aqua-700, #0673A1); }
.es-fbar-facet[open] > summary .es-fbar-caret { transform:rotate(180deg); }
.es-fbar-n                    { font-family:var(--es-font-mono); font-variant-numeric:tabular-nums;
                                font-size:11px; font-weight:600; color:var(--es-text-strong); }
/* A single-select facet names its choice instead of counting it — one of two says which one. */
.es-fbar-pick                 { font-weight:600; color:var(--es-aqua-700, #0673A1); }

/* Panel. Chrome matches the funnel popover (§9) and reuses its .es-fm-* internals, but anchors to
   its own summary rather than being placed by script. */
.es-fbar-menu                 { position:absolute; z-index:1100; top:calc(100% + 6px); left:0;
                                width:320px; background:#fff; border-radius:12px;
                                border:.5px solid var(--es-border-subtle);
                                box-shadow:0 12px 32px rgba(10,26,47,.22); overflow:hidden;
                                font-family:var(--es-font-sans); color:var(--es-grey-700, #4D4D4D);
                                animation:esMenuIn .12s var(--es-ease); }
.es-fbar-menu.is-end          { left:auto; right:0; }
.es-fbar-menu .es-fm-list     { max-height:252px; }
.es-fbar-menu .es-fm-opt      { gap:9px; }
.es-fbar-menu .es-fm-opt .lbl { flex:1 1 auto; min-width:0; }
.es-fbar-menu .es-fm-opt .es-fbar-n { flex:0 0 auto; }
.es-fbar-none                 { padding:14px 9px; text-align:center; font-size:13px;
                                color:var(--es-text-muted); }

/* Row count — feedback on what the bar has done, so the quick-find is not silent. */
.es-fbar-count                { margin-left:auto; font:400 12px var(--es-font-sans);
                                color:var(--es-text-body); }
.es-fbar-count b              { font-family:var(--es-font-mono); font-weight:600;
                                color:var(--es-text-strong); }
/* .es-clear-all carries margin-left:auto for the in-table chip toolbar; here the count claims it. */
.es-fbar > .es-clear-all      { margin-left:0; }

/* The panel is position:absolute, so .card's overflow:hidden crops it at the card's bottom edge
   (same trap as the row-action flyout above). Release the clip only while a facet is open. */
.card:has(.es-fbar-facet[open]) { overflow:visible; }

@media (max-width:576px){
  .es-fbar-find               { flex:1 1 100%; }
  .es-fbar-menu               { width:min(320px, calc(100vw - 32px)); }
  .es-fbar-count              { margin-left:0; }
}