into the active ribbon item
for backwards-compat; eSuite ribbons show the active item via the .active class instead. vlesupport-theme.css
gives .ribbonItemSelected an aqua-tint background, so left visible it paints a stripe over the active tab's
label. Hide it globally for every eSuite ribbon (covers ribbons that don't declare their own local rule,
e.g. mentoring, providerManager). */
.es-ribbon .ribbonItemSelected,.es-ribbon-tab .ribbonItemSelected{display:none!important}
:root,[data-bs-theme=light]{--bs-form-invalid-color:var(--es-red-700)}
.form-control.is-invalid{border-color:var(--es-red-500)}
/* A focused field that needs changing keeps the field's focus ring, not Bootstrap's red glow. */
.form-control.is-invalid:focus,.form-select.is-invalid:focus{border-color:var(--es-red-500);box-shadow:var(--es-shadow-focus-soft)}
/* A field's error is never under 12px, as .small; and error text has the one red. */
.invalid-feedback{font-size:max(.75rem,.875em)}
.text-danger{color:var(--es-red-700)!important}
.form-text{font-size:.75rem;line-height:1.45;color:var(--es-text-muted)}
.form-check-input{width:1rem;height:1rem;border:1.5px solid var(--es-border-input);accent-color:var(--es-accent)}
.form-check-input:checked{background-color:var(--es-accent);border-color:var(--es-accent)}
/* Part-ticked as ticked; in a navy header a white edge keeps any box 3:1 against the navy (white 10:1, the accent inside it 5.7:1). */
.form-check-input:indeterminate{background-color:var(--es-accent);border-color:var(--es-accent)}
.es-table>thead .form-check-input,.es-table>thead .form-check-input:checked,.es-table>thead .form-check-input:indeterminate{border-color:#fff}
/* The rich-text editor in a field's look; "body" outranks the editor's own sheet, which loads after this one. */
body .note-editor.note-frame{border:1.5px solid var(--es-border-input);border-radius:.375rem;color:var(--es-text-body);font-family:var(--es-font-sans)}
body .note-editor.note-frame:focus-within{border-color:var(--es-blue-800);box-shadow:var(--es-shadow-focus-soft)}
body .note-editor.note-frame .note-editing-area .note-editable{font-size:.8125rem;color:var(--es-text-body)}
.form-check-input:focus{box-shadow:var(--es-focus-ring)}
.form-check-label{font-size:.8125rem;color:var(--es-text-body)}
/* ----------------------------------------------------------------------------
6. ALERTS — 4px left rule + tint + leading icon (NOT a full border)
---------------------------------------------------------------------------- */
.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)}
/* A link in an alert reads in the alert's own colour, still underlined. */
.alert a:where(:not([class]):not([role])){color:inherit}
/* ----------------------------------------------------------------------------
7. PROGRESS — 10px pill track, brand fill, label row above
---------------------------------------------------------------------------- */
.es-progress-label{display:flex;justify-content:space-between;font-size:.6875rem;color:var(--es-text-body);margin-bottom:var(--space-1)}
.es-progress-label .val{font-weight:600}
.progress{height:10px;background:var(--es-grey-100);border-radius:var(--radius-pill)}
.progress-bar{border-radius:var(--radius-pill);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)}
/* ----------------------------------------------------------------------------
8. TABLES (DataTable) — navy header, zebra rows, blue-tint hover
Canonical markup emitted by Table::render (see public/assets/lib/Table.php):
Funnel popover + client-side filter behaviour lives in /assets/js/esuite-table.js.
Add .is-active to a .es-th-funnel when its column is filtered (turns aqua).
---------------------------------------------------------------------------- */
/* A table wider than its card scrolls sideways rather than being clipped at the card's edge. */
.es-table-wrap{background:#fff;border:1px solid var(--es-grid-line);border-radius:var(--radius-lg);overflow-x:auto;overflow-y:hidden;
font-family:var(--es-font-sans)}
/* Sideways only: overflow-x alone makes y scroll too, and half-pixel rounding gave every table a 1px vertical scrollbar. The page scrolls. */
.es-table-scroll{overflow-x:auto;overflow-y:hidden}
/* In a card with no padding the card draws the frame, so the wrap does not draw a second one. */
.card-body.p-0>.es-table-wrap,.card-body.p-0>.table-responsive>.es-table-wrap{border:0;border-radius:0}
.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:var(--text-sm);
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)}
/* A 24px sort or filter button takes 4px of the padding, so the row keeps its height. */
.es-table>thead>tr>th:has(.es-th-label,.es-th-funnel){padding-top:7px;padding-bottom:7px}
/* The label and its sort icon on the left, the filter at the cell's right edge; a number column keeps its label by the filter. */
.es-th{display:flex;align-items:center;gap:var(--space-1);width:100%}
.es-table>thead>tr>th.es-num .es-th-label{margin-left:auto}
.es-th-label{display:inline-flex;align-items:center;gap:7px;min-height:24px;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:var(--text-2xs);color:var(--text-on-navy-muted);transition:color .12s}
.es-th-label:hover>i{color:#fff}
/* Funnel */
.es-th-funnel{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:var(--radius-xs);
border:0;padding:0;margin-left:auto;cursor:pointer;font-size:var(--text-2xs);background:transparent;flex:none;
color:var(--text-on-navy-muted);transition:background .12s,color .12s}
.es-table>thead>tr>th.es-num .es-th-funnel{margin-left:2px}
.es-th-funnel:hover{color:#fff}
.es-th-funnel.is-active{color:#fff;background:rgba(255,255,255,.3)}
/* Body — striped + aqua hover */
.es-table>tbody>tr{transition:background .12s}
/* Only a row that opens something says so; elsewhere the row's own link does */
.es-table>tbody>tr[data-href],.es-table>tbody>tr[onclick]{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:1px solid var(--es-grid-line);white-space:nowrap;vertical-align:middle}
/* Grid: a line round every cell, faint separators on the navy header; the wrap or card draws the outside edge. */
.es-table>thead>tr>th:not(:last-child){box-shadow:inset -1px 0 0 rgba(255,255,255,.22)}
.es-table>tbody>tr:first-child>td{border-top:0}
.es-table>tbody>tr>td:first-child{border-left:0}
.es-table>tbody>tr>td:last-child{border-right:0}
.es-table-wrap .es-table>tbody>tr:last-child>td{border-bottom:0}
.es-table>tfoot>tr>td{border-top:1px solid var(--es-grid-line)}
/* IDs, references and dates line up by tabular figures, never by a monospace face. */
.es-table td.mono,.es-table .mono{font-variant-numeric:tabular-nums}
.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}
.es-table a:where(:not([class]):not([role])){color:var(--text-link);text-decoration:underline;text-underline-offset:2px}
/* 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}
/* ...and not aqua-text either. .es-table a above sets colour for a plain row link, but wins over
.btn's own --bs-btn-color by specificity (class+element beats class alone) — so a colour-filled
button rendered as an
(e.g. btn-primary, btn-danger) showed its own fill colour as text
instead of the white every other .btn of that colour gets. Read the button's own variable back. */
.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, double-click to reset; esuite-table.js pins the widths.
The heading is sticky, which already makes it the grip's positioning box. */
.es-col-grip{position:absolute;top:0;right:0;width:24px;height:100%;cursor:col-resize;touch-action:none;
-webkit-user-select:none;user-select:none;z-index:2}
.es-col-grip::after{content:"";position:absolute;top:22%;right:4px;width:1px;height:56%;
background:transparent;transition:background var(--es-dur) var(--es-ease),width var(--es-dur) var(--es-ease)}
.es-col-grip:hover::after{background:var(--es-aqua-400);width:2px}
/* Drawn inside the heading's edge, where a ring outside it would be clipped. */
.es-col-grip:focus-visible{outline:2px solid #fff!important;outline-offset:-2px!important;box-shadow:none!important;border-radius:2px}
/* Room for the grip's 24px target beside a heading's filter button, so the two never overlap. */
.es-table.es-table-grips>thead>tr>th:not(:last-child){padding-right:26px}
.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);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}
/* A heading wraps when its column is tight, so a column of short values narrows to its data instead of a text column being cut. */
.es-table>thead>tr>th,.es-table>thead>tr>th .es-th-label{white-space:normal}
.es-table>thead>tr>th.es-num .es-th-label{text-align:right}
.es-table.es-table-fit>thead>tr>th .es-th-label,.es-table.es-table-sized>thead>tr>th .es-th-label{overflow:visible;text-overflow:clip}
/* A disclosure in a cell opens downwards in lines, never sideways past the card. */
.es-table td details[open]{white-space:normal}
.es-table td .es-cell-detail{display:block;max-width:28rem;margin-left:auto;white-space:normal}
/* Active-filter chip toolbar */
.es-table-filters{display:flex;align-items:center;flex-wrap:wrap;gap:var(--space-2);padding:9px 14px;
background:var(--es-surface-sunken);border-bottom:.5px solid var(--es-border-subtle)}
.es-table-filters .es-filters-label{font:600 var(--es-text-group-label) var(--es-font-sans);color:var(--es-text-muted)}
.es-chip{display:inline-flex;align-items:center;gap:6px;padding:3px 5px 3px 10px;border:1px solid currentColor;border-radius:var(--radius-pill);
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:var(--text-xs);line-height:1;padding:2px}
.es-clear-all{margin-left:auto;border:1.5px solid var(--es-grey-100,#E1E6EB);border-radius:var(--radius-sm);padding:5px var(--space-3);
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)}
/* ---- Funnel filter popover (Excel-style: search checklist + condition row) ---- */
/* A row's ⋯ menu in a server-paged table (es_data_table kind actions), placed by es-float.js */
.es-dt-actions{width:1%;white-space:nowrap;text-align:center}
/* A centred column (es_data_table align center): its heading's label and funnel, and its cells */
.es-table>thead>tr>th.es-dt-center,.es-table>thead>tr>th.es-dt-center.es-num{text-align:center}
.es-table>thead>tr>th.es-dt-center .es-th{justify-content:center}
.es-table>thead>tr>th.es-dt-center .es-th-label,.es-table>thead>tr>th.es-dt-center .es-th-funnel{margin-left:0;margin-right:0}
.es-table>tbody>tr>td.es-dt-center,.es-table>tbody>tr>td.es-dt-center.es-num{text-align:center}
.es-row-menu-btn{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border:1.5px solid transparent;border-radius:var(--radius-sm);background:transparent;color:var(--es-text-muted);cursor:pointer}
.es-row-menu-btn:hover,.es-row-menu-btn[aria-expanded="true"]{border-color:var(--es-border-control-subtle);background:var(--es-white);color:var(--es-blue-800)}
.es-row-menu{z-index:1100;min-width:12rem;padding:var(--space-1) 0;background:#fff;border:.5px solid var(--es-border-subtle);border-radius:var(--radius-md);box-shadow:var(--shadow-md);text-align:left}
.es-row-menu[hidden]{display:none}
.es-row-menu-item{display:flex;align-items:center;gap:var(--space-2);width:100%;min-height:32px;padding:var(--space-2) var(--space-3);border:0;background:transparent;color:var(--es-text-body);font-size:var(--text-sm);text-align:left;cursor:pointer}
.es-row-menu-item:hover,.es-row-menu-item:focus-visible{background:var(--es-blue-tint);color:var(--es-blue-900)}
.es-row-menu-item[hidden]{display:none}
.es-row-menu-item>i{width:16px;color:var(--es-text-muted)}
.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-head{display:flex;align-items:center;gap:var(--space-2);padding:9px var(--space-3);background:var(--es-surface-sunken);
border-bottom:.5px solid var(--es-border-subtle)}
.es-fm-head>i{font-size:var(--text-2xs);color:var(--es-blue-900,#293F6D)}
.es-fm-head strong{font:600 var(--text-sm) var(--es-font-sans);color:var(--es-blue-900,#293F6D);flex:1}
.es-fm-body{padding:10px var(--space-3)}
.es-fm-search,.es-fm-val,.es-fm-op{width:100%;box-sizing:border-box;padding:6px 9px;border-radius:var(--radius-sm);
border:1.5px solid var(--es-border-input,#8C8C8C);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:var(--space-2) 0 0;border:1px solid var(--es-grey-100,#E1E6EB);border-radius:var(--radius-sm)}
.es-fm-opt{display:flex;align-items:center;gap:var(--space-2);padding:6px 9px;font-size:var(--text-sm);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 var(--es-text-group-label) var(--es-font-sans);color:var(--es-text-muted)}
.es-fm-foot{display:flex;gap:var(--space-2);padding:10px var(--space-3);border-top:.5px solid var(--es-border-subtle);background:var(--es-surface-sunken)}
.es-fm-foot button{flex:1;padding:7px 10px;border-radius:var(--radius-sm);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 var(--space-4);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-text-muted)}
/* Rows-per-page selector */
.es-foot-size{display:inline-flex;align-items:center;gap:var(--space-2);margin-left:auto}
.es-foot-size label{margin:0;font:500 12px var(--es-font-sans);color:var(--es-text-muted)}
.es-foot-select{height:34px;padding:0 30px 0 11px;border:1px solid var(--es-border-input,#8C8C8C);border-radius:var(--radius-sm);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:var(--space-1);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:var(--radius-sm);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}
/* The server-paged table's pager (es-data-table.js): buttons, drawn like the links above; a gap is a plain mark. */
.es-table-foot .pagination>li>button,.es-table-foot .pagination>li>span{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:var(--radius-sm);background:#fff;color:var(--es-grey-700,#4D4D4D);font:600 13px var(--es-font-sans);line-height:1;
cursor:pointer;transition:background var(--es-dur) var(--es-ease),border-color var(--es-dur) var(--es-ease),color var(--es-dur) var(--es-ease)}
.es-table-foot .pagination>li>button:hover:not(:disabled){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>button{border:1.5px solid var(--es-blue-800,#4265AF);background:var(--es-blue-800,#4265AF);color:#fff;cursor:default}
.es-table-foot .pagination>li>button:disabled{opacity:.45;background:var(--es-grey-50,#F1F2F7);cursor:not-allowed}
.es-table-foot .pagination>li>span{border-color:transparent;background:transparent;cursor:default}
.es-data-table .es-table-filters[hidden],.es-data-table .es-filter-menu[hidden]{display:none}
/* While a server-paged table fetches, its rows fade, so stale rows are not taken for the answer. */
.es-data-table[aria-busy="true"] tbody{opacity:.55;transition:opacity var(--es-dur) var(--es-ease)}
/* A cell holding several items, one a line (a learner's courses). */
.es-table td.es-wrap.es-pre-line{white-space:pre-line}
/* 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:var(--radius-lg);
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:var(--radius-sm);padding:var(--space-2) var(--space-3);font-size:var(--text-sm);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:var(--space-1)}
.es-pager button{min-width:30px;height:30px;border-radius:var(--radius-sm);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}
/* ----------------------------------------------------------------------------
9. BESPOKE — no Bootstrap equivalent
---------------------------------------------------------------------------- */
/* Avatar — initials chip */
.es-avatar{width:40px;height:40px;border-radius:50%;background:var(--es-avatar-fill-default);color:#fff;
display:inline-flex;align-items:center;justify-content:center;font-weight:600;font-size:.875rem;flex-shrink:0}
/* Inverse, for the top bar: white with the bar's blue initials */
.es-avatar-inverse{background:var(--es-white);color:var(--navy-800)}
/* 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 */
.es-metric{background:var(--es-white);border:.5px solid var(--es-border-subtle);border-radius:.5rem;
padding:.875rem 1rem;text-align:center}
.es-metric .val{font-size:1.625rem;font-weight:600;line-height:1;color:var(--es-blue-800);font-variant-numeric:tabular-nums}
/* Figure tones use the -600/-700 steps: the bright -500 fills fail 3:1 even at this size. */
.es-metric .val.tone-green{color:var(--es-green-700)}.es-metric .val.tone-orange{color:var(--es-orange-600)}
.es-metric .val.tone-red{color:var(--es-red-700)}.es-metric .val.tone-aqua{color:var(--es-aqua-700)}
.es-metric .lbl{font-size:.75rem;line-height:1.4;color:var(--es-text-muted);margin-top:6px}
/* Numbers in a column: right-aligned, digits the same width. */
.es-num,.es-table>thead>tr>th.es-num{text-align:right;font-variant-numeric:tabular-nums}
/* Hints, notes and captions: 12px muted, sentence case, never italic. */
.es-hint{font-size:.75rem;line-height:1.45;color:var(--es-text-muted)}
/* An error takes its field's hint's place. */
.is-invalid ~ .es-hint,.input-group:has(> .is-invalid) ~ .es-hint{display:none}
/* 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:var(--space-2) 0;min-width:232px;overflow:hidden}
.es-vnav a{display:flex;align-items:center;gap:10px;padding:10px var(--space-4);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:var(--text-on-navy-muted)}
.es-vnav a:focus-visible{box-shadow:inset 0 0 0 2px #fff,inset 0 0 0 4px var(--es-blue-900)!important}
/* 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}
/* Default/home item (e.g. Course Detail) — persistent slightly-lighter navy so the landing
page stands out when a different sub-page is active. The active state wins (:not(.active))
so the home item still gets the orange current-page rail when it IS the open page. */
.es-vnav a.nav-home:not(.active){background:var(--es-blue-850,#33497D);color:#fff}
.es-vnav a.nav-home:not(.active) i{color:var(--text-on-navy-muted)}
/* 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 var(--space-4);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:var(--text-xs);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:var(--text-2xs);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)}
/* ----------------------------------------------------------------------------
9b. MODULE RIBBON (.es-ribbon)
The per-module action strip: a white bar under the top bar, joined to the current area's tab, with a hairline below. Shared,
authoritative styling: a module ribbon.php carries markup only (container .es-ribbon, items .es-ribbon-tab or ) and no