html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

a, .btn-link {
    color: #006bb7;
}

.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

.k-dropdownlist{
    background-color:#fff!important;
}


/* Dylan (AI), 2026-08-08, gap-analysis fix — view.aspx.cs InterpreterList_ItemDataBound highlights any
   provider-role (userroleid==6) row in the booking-view Interpreters grid; matches legacy's Color.LightGoldenrodYellow. */
.interpreter-row-provider td {
    background-color: #fafad2 !important;
}

/* Dylan (AI), 2026-08-10, per Dylan's report ("clicking anywhere in a tab's content area turns its border
   black") — root cause of the whole family of these reports, including the CollapsibleCard one below. Kendo's
   TelerikTabStrip gives its content wrapper (.k-tabstrip-content) tabindex="0" for keyboard accessibility (so
   focus can land there after selecting a tab). Clicking ANY non-focusable spot inside a tab pane — plain text,
   a card body, whitespace — has nothing more specific to focus, so the click focuses this wrapper directly, and
   its default outline (1px dotted #424242, i.e. Kendo's theme-default focus colour, not a real "border") renders
   around the ENTIRE tab pane. :focus-visible (unlike :focus) does not match plain mouse clicks in modern
   browsers, so suppressing the outline only for :focus while keeping a real ring on :focus-visible preserves
   keyboard-navigation accessibility (Tab key still shows a visible ring) while fixing the mouse-click case. */
/* !important needed on both rules — Telerik.UI.for.Blazor's own kendo-theme-default/all.css sets this same
   .k-tabstrip-content:focus outline and loads AFTER app.css in the page, so it wins on equal specificity
   without !important (confirmed live: the selector matched but Kendo's outline still rendered). */
.k-tabstrip-content:focus {
    outline: none !important;
}

.k-tabstrip-content:focus-visible {
    outline: none !important;
    box-shadow: inset 0 0 0 0.15rem #258cfb !important;
}

/* Dylan (AI), 2026-08-08, IO2.Components.Shared.CollapsibleCard's header — this native-clickable div previously
   had no tabindex, so a mouse click bubbled focus to the ancestor Telerik .k-tabstrip-content wrapper (fixed
   generally above as of 2026-08-10). Keeping this rule too: it gives the header itself a proper keyboard-focus
   ring (matching the blue above) scoped tightly to the clickable header rather than the whole tab pane. */
.collapsible-header:focus {
    outline: none;
}

.collapsible-header:focus-visible {
    outline: none;
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

/* Dylan (AI), 2026-08-17, per Dylan's request — smooth expand/collapse for CollapsibleCard (booking/view's
   Actions/API Actions/Filters panels) instead of the previous instant show/hide. grid-template-rows 0fr/1fr is the
   standard trick for animating to an unknown/"auto" content height — a fixed max-height transition would look
   wrong here since these panels' content height varies a lot from one to another. */
.collapsible-body-wrap {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.3s ease;
}

.collapsible-body-wrap.expanded {
    grid-template-rows: 1fr;
}

.collapsible-body-inner {
    overflow: hidden;
}

.collapsible-chevron {
    transition: transform 0.25s ease;
}

.collapsible-chevron.expanded {
    transform: rotate(180deg);
}

/* Dylan (AI), 2026-08-17, per Dylan's request — the booking/view Notes panel's own scroll area; height is fixed
   (the "expand" control widens the panel horizontally instead — see .general-tab-row below), kept as its own
   class since the compact card's max-height is still a deliberate, named constant here. */
.notes-scroll-box {
    max-height: 450px;
}

/* Dylan (AI), 2026-08-17, per Dylan's request — Job Notes search highlighting (View.razor.js's applyNoteSearch/
   scrollToNoteHit). Active match is a stronger orange so it's distinguishable from the other (yellow) matches at a
   glance, matching the usual browser Ctrl+F convention. */
.io2-note-hit {
    background-color: #ffe066;
    color: inherit;
    border-radius: 2px;
}

.io2-note-hit-active {
    background-color: #ff9f1c;
}

/* Dylan (AI), 2026-08-18, per Dylan's request — booking/view's Machine Translated Documents "Submit Options"
   button (View.razor). TelerikDropDownButton has no Width parameter (passing one throws at runtime — confirmed
   live), and App.razor's dropdownPopupWidth.js forces the popup to match this button's own rendered width, so the
   button itself needs to be wide enough for its longest item ("Submit Converted File") not to truncate. */
.io2-submit-options-btn {
    width: 210px;
}

/* Dylan (AI), 2026-08-18, per Dylan's request — booking/view's TelerikRating star colour (Interpreter Rating panel
   and the Interpreters tab's Min Rating filter both use Class="io2-rating-green"). Legacy's RadRating used
   ForeColor="Green"; TelerikRating's default theme colour is orange (#ff6358, default-main.css:40280/40288) and has
   no direct "Color" parameter. Moved here from an inline <style> block that only rendered inside the Interpreter
   Rating panel's own conditional (_showInterpreterRatingPanel) — the Min Rating filter is shown even when that
   panel isn't (no selected interpreter yet), so the rule needs to always be loaded, not conditionally rendered. */
.io2-rating-green .k-rating-item.k-selected,
.io2-rating-green .k-rating-item.k-selected:focus,
.io2-rating-green .k-rating-item.k-selected.k-focus,
.io2-rating-green .k-rating-item:hover,
.io2-rating-green .k-rating-item.k-hover {
    color: #198754;
}

/* Dylan (AI), 2026-08-17, per Dylan's follow-up — the Notes panel's "expand" widens the whole sidebar column
   (Actions/API Actions/Notes/Activity) at the General tab's expense, rather than growing Notes' own height, so its
   card's content has more horizontal room to read without changing the row's total height. Scoped to the same
   min-width the col-xl-8/col-xl-4 classes themselves activate at (Bootstrap's xl breakpoint) — below that width
   the two columns already stack full-width, where a "wider sidebar" has no meaning. Percentages (not flex-basis)
   because Bootstrap's own .col-xl-8/.col-xl-4 set `width` directly; overriding the same property, with the extra
   classes below giving this rule higher specificity, is what lets the transition interpolate smoothly instead of
   the two rules fighting each render. */
@media (min-width: 1200px) {
    .general-tab-main, .general-tab-sidebar {
        transition: width 0.35s ease;
    }

    .general-tab-row.notes-expanded .general-tab-main {
        width: 41.66666667%;
    }

    .general-tab-row.notes-expanded .general-tab-sidebar {
        width: 58.33333333%;
    }
}

/* Dylan (AI), 2026-08-03, per feedback — force the TelerikSplitButton "View" action colour to match this app's
   plain Bootstrap palette, since Telerik's own ThemeColor swatches don't line up with it.
   Dylan (AI), 2026-08-19, per feedback — View is a primary action, changed from the earlier green (matched
   "Add Client Fee Schedule") to the standard blue .btn-primary colour (#1b6ec2, app.css:9), the app-wide
   convention for view/primary actions.
   Dylan (AI), 2026-08-19, first attempt at the colour change above didn't render — confirmed live via the
   CSSOM (document.styleSheets) that Telerik's own kendo-theme-default/all.css defines
   ".k-button.k-button-success, .k-button.k-button-solid.k-button-success" with the SAME specificity
   (two classes) as ".btn-view-split .k-button" and loads AFTER app.css in the page, so it won the cascade tie
   on load order. Adding ".k-button-success" to our selector below (three classes) beats it regardless of
   stylesheet order. */
.btn-view-split .k-button.k-button-success,
.btn-view-split.k-button.k-button-success {
    background-color: #1b6ec2;
    border-color: #1b6ec2;
    color: #fff;
}
.btn-view-split .k-button.k-button-success:hover,
.btn-view-split.k-button.k-button-success:hover {
    background-color: #1861ac;
    border-color: #145293;
}

/* Dylan (AI), 2026-08-19, per feedback — a TelerikSplitButton's dropdown (e.g. btn-view-split's Copy/Delete menu)
   renders invisible: confirmed live that the popup's k-animation-container gets an inline width equal to the
   22px arrow-toggle sub-button that opened it (Telerik's own popup-positioning JS, not app code — the earlier
   dropdownPopupWidth.js guard added the same day doesn't affect this, since Telerik sets this width itself
   regardless of that script). Since the container's own overflow is "visible" (Telerik theme default), giving
   the inner menu list an explicit min-width renders it correctly outside the container's undersized box —
   confirmed live via DevTools before committing this. k-menu-group-sm is every Size="sm" Telerik menu/split-
   button/context-menu popup app-wide, so this isn't scoped to just this page, matching the .btn-view-split
   colour fix above in blast radius. */
.k-menu-group.k-menu-group-sm {
    min-width: 130px;
}

/* Dylan (AI), 2026-08-06, per feedback — the fixed top navbar (`nav`/`.navbar`, z-index 1039, ~58px tall) was
   rendering ABOVE the Blazored.Toast container (its own scoped CSS sets z-index:999, top:2rem/32px), obscuring
   the top portion of every toast, app-wide, on every page — not a Schedule.razor-specific issue. Confirmed live
   via DevTools before this fix: getBoundingClientRect on the toast container showed top:32 while the navbar's
   own rect was top:0/bottom:58 — the two genuinely overlapped. !important is needed because Blazored.Toast's own
   rule carries a Blazor CSS-isolation attribute selector ([b-xxxxxxxxxx]), which this plain class selector can't
   out-specificity otherwise. */
/* Matthew (AI), 2026-08-25, raised 1100 -> 20000 (MP): a toast raised from inside a TelerikDialog - the IVR dashboard's
   "Create Booking for..." popup raising the client-list-refresh toast - was rendering BEHIND the dialog and could not be seen.

   1100 was picked above only to clear the fixed navbar (z-index 1039, see the note above). Telerik is a different problem: it
   assigns a dialog's z-index at RUNTIME as an inline style rather than from the theme stylesheet - confirmed by there being no
   z-index of 1000 or greater anywhere in wwwroot/css/themes/default-main.css - and its base for a popup is 10002, climbing as
   popups stack. So no small static value can win; 20000 clears that base with a very large margin.

   A toast is a transient notification and is meant to be the top-most thing on screen, so sitting above dialogs is correct
   rather than a compromise. */
.blazored-toast-container {
    z-index: 20000 !important;
}
.blazored-toast-container.position-topright,
.blazored-toast-container.position-topleft,
.blazored-toast-container.position-topcenter {
    top: 5rem !important;
}

.card:not([class*=bg-]) .card-header {
    font-weight: bold;
    line-height: 1.2;
    color: #363d47;
    font-size: 1.0rem;
    padding: 8px;
}

.k-table-td .btn-primary{
    color:#fff!important;
}

.badge {
    margin-bottom: 2px;
}

.mr-1 {
    margin-right: 4px;
}

.mr-2 {
    margin-right: 8px;
}
.ml-1 {
    margin-left: 4px;
}

.ml-2 {
    margin-left: 8px;
}

.content {
    padding-top: 1.1rem;
}

h1:focus {
    outline: none;
}
.table-bordered-full td, .table-bordered-full th {
    border: 1px solid silver;
    padding: 4px;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

.minipre {
    font-family: monospace;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.1);
    border: 1px solid silver;
    z-index: 9999;
    padding: 2px;
}

.text-small{
        font-size: small;
}

.text-monospace{
    font-family:monospace;
}
/* Overrides for Bootstrap table-sm and table-small */
.table-sm th, .table-small th, .table-small td, .table-sm td {
    padding: 0.3rem !important;
}
.table, .datatable-table {
    margin-bottom: 0.1rem;
}


h2, .h2 {
    margin-bottom: 0.1rem;
    font-size:1.2rem;
}

.k-grid .k-grid-md td, .k-grid .k-grid-md .k-table-td, .k-grid-md td, .k-grid-md .k-table-td {
    padding-block: 4px !important;
    padding-inline: 6px !important;
}

.k-grid .k-grid-header .k-table-th {
    padding: 4px!important;
}

.k-table-td {
    padding: 4px !important;
}

.k-grid, div.k-chart, .k-chart {
    border: 2px solid #ddd!important;
}

/* Matthew (AI), 2026-07-29, opt-in compact grid text (add Class="grid-sm" to a TelerikGrid): shrinks body-cell,
   in-cell button and pager text to fit more on screen. Column headers keep the standard grid font size. */
.k-grid.grid-sm .k-table-td,
.k-grid.grid-sm td {
    font-size: 0.8125rem;
}

.k-grid.grid-sm .k-table-td .btn,
.k-grid.grid-sm td .btn {
    font-size: 0.8125rem;
    padding: 0.15rem 0.4rem;
}

.k-grid.grid-sm .k-pager {
    font-size: 0.8125rem;
}

/* Dylan (AI), 2026-08-10, per Dylan's request — Kendo's grid-cell theme sets its own (dark grey) colour on plain
   <a> tags inside a table cell, which beats Bootstrap's .btn-primary text colour except on :hover — the button's
   label was effectively invisible until hovered. Forces the standard Bootstrap white label text in every state
   for any .btn-primary rendered as an anchor inside a TelerikGrid cell (e.g. the Placeholder widget's View link). */
.k-grid .k-table-td a.btn-primary,
.k-grid .k-table-td a.btn-primary:hover,
.k-grid .k-table-td a.btn-primary:focus,
.k-grid .k-table-td a.btn-primary:active,
.k-grid .k-table-td a.btn-primary:visited {
    color: #fff !important;
}

/* Dylan (AI), 2026-08-25, per Dylan's request — same Kendo grid-cell <a> colour reset as the .btn-primary override
   above, this time for the plain-text Billing Info amount links on /management/verify(v2) (VerifyGrid.razor):
   Kendo's own dark-grey cell text colour made them indistinguishable from the surrounding non-clickable amounts. */
.k-grid .k-table-td a.verify-amount-link,
.k-grid .k-table-td a.verify-amount-link:visited {
    color: #006bb7 !important;
    text-decoration: underline;
    cursor: pointer;
}
.k-grid .k-table-td a.verify-amount-link:hover,
.k-grid .k-table-td a.verify-amount-link:focus {
    color: #004c85 !important;
}

/* Dylan (AI), 2026-08-14, per Dylan's request — click-and-drag horizontal scrolling for the Interpreter List grid
   (View.razor.js sets/removes these classes on the grid's own ".k-grid-content" pane). Buttons/links/inputs inside
   the grid keep their own cursor (e.g. pointer) since CSS cursor doesn't inherit past an element with its own
   explicit cursor rule — only genuinely non-interactive cells show the grab/grabbing hand. */
.interpreter-list-grid .k-grid-content.io2-drag-scroll {
    cursor: grab;
}

.interpreter-list-grid .k-grid-content.io2-drag-scroll.io2-drag-scrolling {
    cursor: grabbing;
    user-select: none;
}

/* Dylan (AI), 2026-08-24, per Dylan's request — same drag-scroll cursor treatment, for management/interpreters'
   own grid (Interpreters.razor.cs reuses View.razor.js's initDragScroll/disposeDragScroll against this class). */
.interpreters-mgmt-grid .k-grid-content.io2-drag-scroll {
    cursor: grab;
}

.interpreters-mgmt-grid .k-grid-content.io2-drag-scroll.io2-drag-scrolling {
    cursor: grabbing;
    user-select: none;
}

/* Dylan (AI), 2026-08-24, per Dylan's request ("row heights are inconsistent") — belt-and-suspenders alongside the
   truncated Certs/Location/Languages columns and the collapsed single-line Options button group: pins every body
   row to one line height regardless of a stray render still producing multi-line content, rather than relying
   solely on the truncation above never being bypassed. */
.interpreters-mgmt-grid .k-table-td {
    height: 2.25rem;
    vertical-align: middle;
}

/* Dylan (AI), 2026-08-25, per Dylan's request — same drag-scroll cursor treatment, for
   management/cancellationpolicies' own grid (CancellationPolicies.razor.cs reuses View.razor.js's
   initDragScroll/disposeDragScroll against this class). */
.cancellation-policies-grid .k-grid-content.io2-drag-scroll {
    cursor: grab;
}

.cancellation-policies-grid .k-grid-content.io2-drag-scroll.io2-drag-scrolling {
    cursor: grabbing;
    user-select: none;
}

/* Dylan (AI), 2026-08-14, per Dylan's request — hides the page-level (body) scrollbar's visible track/thumb on the
   right edge of the viewport while the booking/view page is open (View.razor.js adds/removes this class on <body>
   itself on mount/dispose, so no other page is affected). Purely cosmetic: body keeps overflow-y:auto underneath,
   so wheel/trackpad/drag scrolling all keep working exactly as before, just without a visible scrollbar. */
body.io2-hide-page-scrollbar {
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* legacy Edge/IE */
}

body.io2-hide-page-scrollbar::-webkit-scrollbar {
    display: none; /* Chrome/Safari/Chromium Edge */
}

.k-loader {
    top: -200px!important;
}

.k-chip-text, .k-chip-label {
    font-size: smaller;
}

.badge-sm {
    font-size: smaller;
}

.tz {
    font-size: 8pt;
}

.form-select, .datatable-selector {
    background-position: right 0.125rem center;
}

.fw-60  { width: 60px !important; }
.fw-80  { width: 80px!important; }
.fw-100 { width: 100px!important; }
.fw-120 { width: 120px !important; }
.fw-125 { width: 125px!important; }
.fw-150 { width: 150px!important; }
.fw-200 { width: 200px!important; }
.fw-250 { width: 250px!important; }


.align-left{
    text-align: left !important;
    justify-content: left;
}

.form-control, .datatable-input {
    padding: 0.375rem 0.525rem;
    font-size: 0.875rem!important;
    border-radius: 0.25rem!important;
}


.textWrap {
    width: 145px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.fad::before, .fa-duotone::before {
    position: relative;
}

.form-select {
    padding: 6px;
}

/* -------------------- Side Navigation Menu ---------------------- */

.nav-fixed #layoutSidenav #layoutSidenav_content {
    padding-left: 13rem;
}

.sidenav .sidenav-menu .nav .sidenav-menu-text {
    padding: 0.5rem 1rem 0.25rem;
    font-size: 0.6rem;
    font-weight: normal;
    letter-spacing: 0.05em;
}

.sidenav .sidenav-menu .nav .nav-link .nav-link-icon {
    width: 20px!important;
}

.sidenav .sidenav-menu .nav .nav-link {
    padding-top: 0.35rem;
    padding-bottom: 0.35rem;
}

.sidenav .sidenav-menu .nav .sidenav-menu-heading {
    padding: 0.75rem 1rem 0.75rem;
    text-transform: uppercase;
    color: #414141;
}

.nav-fixed #layoutSidenav #layoutSidenav_nav {
    width: 13rem;
}

/* -------------------- Card Borders --------------------------- */
.border-left-primary {
    border-left: .15rem solid #4e73df !important
}

.border-bottom-primary {
    border-bottom: .15rem solid #4e73df !important
}

.border-left-secondary {
    border-left: .15rem solid #858796 !important
}

.border-bottom-secondary {
    border-bottom: .15rem solid #858796 !important
}

.border-left-success {
    border-left: .15rem solid #1cc88a !important
}

.border-bottom-success {
    border-bottom: .15rem solid #1cc88a !important
}

.border-left-info {
    border-left: .15rem solid #36b9cc !important
}

.border-bottom-info {
    border-bottom: .15rem solid #36b9cc !important
}

.border-left-warning {
    border-left: .15rem solid #f6c23e !important
}

.border-bottom-warning {
    border-bottom: .15rem solid #f6c23e !important
}

.border-left-danger {
    border-left: .15rem solid #e74a3b !important
}

.border-bottom-danger {
    border-bottom: .15rem solid #e74a3b !important
}

.border-left-light {
    border-left: .15rem solid #f8f9fc !important
}

.border-bottom-light {
    border-bottom: .15rem solid #f8f9fc !important
}

.border-left-dark {
    border-left: .15rem solid #5a5c69 !important
}

.border-bottom-dark {
    border-bottom: .15rem solid #5a5c69 !important
}

.nopadding {
    padding: 0 !important;
}



/* Sidebar Collapse Styles */

.sidebarCollapsedMini {
    text-align:center;
    margin-top:0.5rem;
    font-size: 15pt;
}

#layoutSidenav_nav {
    width: 13rem;
    transition: width 0.3s ease;
}

#layoutSidenav #layoutSidenav_nav.sidenav-collapsed {
    width: 3rem;
}

        /* When sidebar is collapsed, hide text and adjust spacing */
        #layoutSidenav_nav.sidenav-collapsed .nav-link {
            padding: 0.5rem 0;
            text-align: center;
            justify-content: center;
        }

            #layoutSidenav_nav.sidenav-collapsed .nav-link:not(.nav-link-icon):not(:has(.nav-link-icon)) {
                xfont-size: 0;
                white-space: nowrap;
                overflow: hidden;
            }

            #layoutSidenav_nav.sidenav-collapsed .nav-link .nav-link-icon {
                margin-right: 0;
                display: inline-block;
            }

            /* Hide all text content when collapsed */
            #layoutSidenav_nav.sidenav-collapsed .sidenav-menu-heading,
            #layoutSidenav_nav.sidenav-collapsed .nav-link:not(.nav-link-icon),
            #layoutSidenav_nav.sidenav-collapsed .sidenav-collapse-arrow,
            #layoutSidenav_nav.sidenav-collapsed .badge,
            #layoutSidenav_nav.sidenav-collapsed .sidenav-footer,
            #layoutSidenav_nav.sidenav-collapsed .sidenav-menu-text {
                display: none;
            }

        /* Keep icons visible when collapsed */
        #layoutSidenav_nav.sidenav-collapsed .nav-link-icon {
            display: block !important;
            margin: 0 auto;
        }

/* Adjust the main content area */
#layoutSidenav_content {
    transition: margin-left 0.3s ease;
}

#layoutSidenav_nav.sidenav-collapsed ~ #layoutSidenav_content {
    margin-left: -11rem;
}

/* Hide nested menus when collapsed */
#layoutSidenav_nav.sidenav-collapsed .collapse,
#layoutSidenav_nav.sidenav-collapsed .collapsing {
    display: none !important;
}

/* Dylan (AI), 2026-07-28, fixes a blank second line inside closed TelerikMultiSelect filter controls: with
   Filterable="true" + TagMode="Single", the closed control renders BOTH the "N item(s) selected" summary chip AND
   the always-present type-to-filter <input> as separate flex items inside .k-input-values. In the narrow report
   filter columns (~140-160px) they don't fit on one line, so the (empty when unfocused) filter input wraps onto
   its own line, showing as blank space below the chip. Forcing nowrap keeps just the chip visible when closed;
   the filter input still works normally once the control is focused/opened. */
.filter-multiselect .k-input-values {
    flex-wrap: nowrap;
    overflow: hidden;
}

/* Dylan (AI), 2026-07-29, verify-queue row highlights (VerifyGrid.razor.cs's OnRowRender) — matches the legacy
   verify.aspx/verifyv2.aspx ItemDataBound BackColor values (#f0eda8 follow-up, #93bfe6 late cancellation). */
.k-grid tr.verify-followup-row > td {
    background-color: #f0eda8 !important;
}
.k-grid tr.verify-late-cancel-row > td {
    background-color: #93bfe6 !important;
}



/* ==========================================================================
   Bootstrap badge override — "Soft chip" style
   --------------------------------------------------------------------------
   Drop-in stylesheet. Include AFTER bootstrap.css:
 
     <link rel="stylesheet" href="bootstrap.min.css">
     <link rel="stylesheet" href="badge-soft-chip.css">
 
   Use Bootstrap's normal badge markup — no class changes needed:
 
     <span class="badge text-bg-primary">Primary</span>
     <span class="badge text-bg-success">Active</span>
 
   Works with the BS 5.2+ `.text-bg-*` helpers and the older `.bg-*` helpers.
   ========================================================================== */

.badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px 3px 8px;
    font-size: 11.5px;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    border-radius: 4px;
    vertical-align: baseline;
    white-space: nowrap;
}

    .badge::before {
        content: "";
        width: 6px;
        height: 6px;
        border-radius: 50%;
        flex: 0 0 6px;
        background: currentColor;
        opacity: 0.85;
    }

    /* Pill modifier still works — keep the corner radius softer than buttons */
    .badge.rounded-pill {
        border-radius: 999px;
        padding-left: 10px;
        padding-right: 12px;
    }

    /* --------------------------------------------------------------------------
   Contextual variants — tinted fill + dark text from the same hue.
   Targets both `.text-bg-*` (BS 5.2+) and `.bg-*` (older).
   The dot inherits `currentColor` so it picks up the strong text shade.
   -------------------------------------------------------------------------- */

    .badge.text-bg-primary,
    .badge.bg-primary {
        background-color: #cfe2ff !important;
        color: #052c65 !important;
    }

        .badge.text-bg-primary::before,
        .badge.bg-primary::before {
            background: #0d6efd;
            opacity: 1;
        }

    .badge.text-bg-secondary,
    .badge.bg-secondary {
        background-color: #e2e3e5 !important;
        color: #2b2f32 !important;
    }

        .badge.text-bg-secondary::before,
        .badge.bg-secondary::before {
            background: #6c757d;
            opacity: 1;
        }

    .badge.text-bg-success,
    .badge.bg-success {
        background-color: #d1e7dd !important;
        color: #0a3622 !important;
    }

        .badge.text-bg-success::before,
        .badge.bg-success::before {
            background: #198754;
            opacity: 1;
        }

    .badge.text-bg-danger,
    .badge.bg-danger {
        background-color: #f8d7da !important;
        color: #58151c !important;
    }

        .badge.text-bg-danger::before,
        .badge.bg-danger::before {
            background: #dc3545;
            opacity: 1;
        }

    .badge.text-bg-warning,
    .badge.bg-warning {
        background-color: #fff3cd !important;
        color: #664d03 !important;
    }

        .badge.text-bg-warning::before,
        .badge.bg-warning::before {
            background: #ffc107;
            opacity: 1;
        }

    .badge.text-bg-info,
    .badge.bg-info {
        background-color: #cff4fc !important;
        color: #055160 !important;
    }

        .badge.text-bg-info::before,
        .badge.bg-info::before {
            background: #0dcaf0;
            opacity: 1;
        }

    .badge.text-bg-light,
    .badge.bg-light {
        background-color: #f8f9fa !important;
        color: #495057 !important;
    }

        .badge.text-bg-light::before,
        .badge.bg-light::before {
            background: #adb5bd;
            opacity: 1;
        }

    .badge.text-bg-dark,
    .badge.bg-dark {
        background-color: #d3d4d5 !important;
        color: #1a1d20 !important;
    }

        .badge.text-bg-dark::before,
        .badge.bg-dark::before {
            background: #212529;
            opacity: 1;
        }

    /* --------------------------------------------------------------------------
   Opt-out — if you ever need a single badge to render without the leading
   dot (e.g. numeric counters), add the `.badge--no-dot` modifier.
   -------------------------------------------------------------------------- */

    .badge.badge--no-dot {
        padding-left: 10px;
    }

        .badge.badge--no-dot::before {
            display: none;
        }

/* Matthew (AI), 2026-07-10 14:22, truncate a long logged-in name in the sidebar footer with an ellipsis instead of wrapping/overflowing */
.sidenav-footer-title {
    display: block;
    max-width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
        }

/* Matthew (AI), 2026-07-25, make the DEFAULT .btn render at the same size as .btn-sm (i.e. no oversized default buttons). We override the
   Bootstrap 5.3 button CSS variables (the same ones .btn-sm sets) rather than concrete padding/font-size, so .btn-sm/.btn-lg keep working
   (each sets its own vars). Kept here in our own app.css — NOT in Bootstrap's stylesheet — so a future Bootstrap update can't clobber it.
   Values mirror this build's .btn-sm exactly. */
.btn {
    --bs-btn-padding-y: 0.5rem;
    --bs-btn-padding-x: 0.75rem;
    --bs-btn-font-size: 0.75rem;
    --bs-btn-border-radius: 0.25rem;
}

/* Matthew (AI), 2026-07-27, "IVR Numbers" slide-out drawer for the IVR dashboard. Ported from InterpreterWeb ivrdashboard.aspx
   (inline styles moved into our own stylesheet). Floating vertical tab on the right slides a panel in/out via translate3d. */
.ivr-phone-drawer {
    position: fixed;
    top: 100px;
    right: 0;
    width: 420px;
    z-index: 999;
    transform: translate3d(100%, 0, 0);          /* hidden off-screen right */
    transition: transform 0.35s ease;            /* slide animation */
    will-change: transform;
    font-family: inherit;
}

.ivr-phone-drawer.ivr-phone-expanded {
    transform: translate3d(0, 0, 0);             /* slid into view */
}

.ivr-phone-drawer-inner {
    background: #ffffff;
    border-radius: 10px 0 0 10px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.12);
    border: 1px solid #e3e6ed;
    padding: 14px 16px 18px;
    margin-right: 20px;
    max-height: 75vh;
    overflow-y: auto;
    min-height: 180px;
    min-width: 360px;
}

.ivr-phone-drawer-handle {                       /* the floating "IVR Numbers" tab/button */
    position: absolute;
    left: -28px;
    top: 40px;
    width: 28px;
    height: 120px;
    border-radius: 10px 0 0 10px;
    background: #2f6fe5;
    box-shadow: 0 4px 12px rgba(0,0,0,0.25);
    color: #fff;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

.ivr-phone-drawer-handle span {
    writing-mode: vertical-rl;                    /* vertical "IVR Numbers" label */
    text-orientation: mixed;
    font-size: 12px;
    font-weight: 200;
    letter-spacing: 1px;
}

.ivr-phone-spinner {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2px solid rgba(255,255,255,0.35);
    border-top-color: #ffffff;
    animation: ivr-phone-spin 0.8s linear infinite;
    display: none;
}

.ivr-phone-drawer-handle.loading .ivr-phone-spinner { display: block; }
.ivr-phone-drawer-handle.loading span { opacity: 0.6; }

@keyframes ivr-phone-spin {
    to { transform: rotate(360deg); }
}

@media (max-width: 992px) {
    .ivr-phone-drawer { display: none; }         /* hidden on small screens */
}

.ivr-phone-title {
    font-size: 15px;
    font-weight: 600;
    color: #444;
    margin-bottom: 10px;
}

.ivr-phone-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}

.ivr-phone-table th,
.ivr-phone-table td {
    border: 1px solid #e6e6e6;
    padding: 8px;
    text-align: left;
    vertical-align: top;
}

.ivr-phone-table th {
    background: #f5f7fb;
    color: #555;
    font-weight: 600;
}

.ivr-phone-table tbody tr:nth-child(even) { background: #fafafa; }

.number-col {
    white-space: nowrap;
    font-family: monospace;
}

.ivr-phone-empty,
.ivr-phone-error,
.ivr-phone-loading-text {
    font-size: 12px;
    color: #666;
    padding: 8px 0;
}

/* Matthew (AI), 2026-07-28, Tier 1 persistent IVR call-control dock. Inline (full-width card) while focused on the active call; a fixed
   picture-in-picture while browsing (.ivr-call-dock--pip) so the operator can view the listing / other calls without dropping the call. */
.ivr-call-dock {
    border: 1px solid #ced4da;
    border-radius: .5rem;
    background: #f8f9fa;
    padding: .5rem .6rem;
    margin-bottom: .6rem;
}
.ivr-call-dock--pip {
    position: fixed;
    bottom: 16px;
    right: 16px;
    width: 340px;
    max-width: 92vw;
    max-height: 72vh;
    overflow: auto;
    z-index: 1080;
    background: #fff;
    box-shadow: 0 6px 24px rgba(0,0,0,.25);
}
@media (max-width: 576px) {
    .ivr-call-dock--pip { width: 92vw; right: 4vw; left: 4vw; }
}

/* Matthew (AI), 2026-07-28, Tier 2 "on call" bar — shown on non-dashboard pages while an IVR call is live (IvrCallDock) */
.ivr-oncall-bar {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    bottom: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
    z-index: 1080;
    background: #fff;
    border: 1px solid #ced4da;
    border-radius: 999px;
    box-shadow: 0 6px 24px rgba(0,0,0,.22);
    padding: 6px 14px;
    max-width: 92vw;
}
.ivr-oncall-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #dc3545;
    flex: 0 0 auto;
    animation: ivr-oncall-pulse 1.4s ease-in-out infinite;
}
@keyframes ivr-oncall-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }

/* Matthew (AI), 2026-07-28, video-panel styles the layout call dock (IvrCallDock) needs OFF the IVR dashboard. These live in
   ivrdashboard.css too, but that stylesheet is only loaded on the dashboard page (its <HeadContent>), so the off-dashboard PIP was
   unstyled. Copied here (app.css is loaded on every page) — a component-scoped IvrCallDock.razor.css can't be used because the scoped
   CSS bundle (IO2.styles.css) is disabled in App.razor. Kept identical to the ivrdashboard.css rules. */
.ivr-video-controls {
    display: flex;
    gap: .4rem;
    align-items: center;
    flex-wrap: wrap;
    padding: .45rem .6rem;
    border-radius: .5rem;
    background: #f1f3f5;
    border: 1px solid #ced4da;
    margin: .5rem 0;
}
.ivr-video-btn-small { padding: 1px 5px !important; }
.ivr-video-btn {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    background: #fff;
    border: 1px solid #ced4da;
    color: #495057;
    border-radius: .35rem;
    padding: .3rem .6rem;
    font-size: .82rem;
    cursor: pointer;
    transition: background .15s, border-color .15s, color .15s;
}
.ivr-video-btn:hover { background: #e9ecef; }
.ivr-video-btn.ivr-video-btn-danger { background: #dc3545; border-color: #dc3545; color: #fff; }
.ivr-video-btn.ivr-video-btn-active { background: #198754; border-color: #198754; color: #fff; }

.ivr-video-grid { display: grid; gap: .6rem; width: 100%; }
.ivr-video-card {
    position: relative;
    background: #111;
    border-radius: .5rem;
    overflow: hidden;
    aspect-ratio: 16 / 9;
    border: 2px solid transparent;
    transition: border-color .25s, box-shadow .25s;
}
.ivr-video-card.ivr-speaking {
    border-color: #22c55e;
    box-shadow: 0 0 0 3px rgba(34, 197, 94, .25);
    animation: ivr-speaking-pulse 1.3s ease-in-out infinite;
}
@keyframes ivr-speaking-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, .35); }
    50% { box-shadow: 0 0 0 6px rgba(34, 197, 94, 0); }
}
.ivr-video-wrap {
    width: 100%;
    height: calc(100% - 28px);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: #111;
}
.ivr-video-wrap video { width: 100%; height: 100%; object-fit: cover; }
.ivr-video-avatar {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: #343a40;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    font-weight: 700;
    color: #dee2e6;
    flex-shrink: 0;
}
.ivr-video-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .25rem .5rem;
    font-size: .72rem;
    font-weight: 600;
    background: rgba(0, 0, 0, .6);
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    color: #fff;
}
/* Matthew (AI), 2026-08-17, `backtick` code spans inside board cards — checklist items, comments and descriptions.
   Global rather than scoped because the same markup is produced by BoardTextFormat for three different components. */
.board-code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Courier New", monospace;
    font-size: 0.875em;
    background-color: rgba(175, 184, 193, 0.2);
    border-radius: 4px;
    padding: 0.15em 0.35em;
    white-space: pre-wrap;
    word-break: break-word;
}

/* Matthew (AI), 2026-08-25, Boards card comment composer/editor (TelerikEditor, EditMode="Div").

   The toolbar is collapsed until the editor has focus, so the box sits at roughly the old textarea height in the narrow
   right-hand column and only grows a toolbar when somebody is actually writing. Pure CSS on purpose: flipping a Blazor
   flag would have to re-render the TelerikEditor, which loses the caret mid-sentence.

   max-height + opacity rather than display:none so it animates, and so the toolbar's buttons keep their measured widths -
   Telerik sizes its overflow ("...") popup from them, and a display:none toolbar measures as zero and mis-collapses.

   :focus-within is what makes this work without any JS, and it is why EditMode="Div" is set on both editors: in the default
   Iframe mode the editable area is a separate document. */
.board-comment-editor .k-toolbar {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    padding-top: 0;
    padding-bottom: 0;
    border-bottom-width: 0;
    transition: max-height .15s ease, opacity .15s ease;
}

.board-comment-editor:focus-within .k-toolbar {
    max-height: 3rem;
    opacity: 1;
    padding-top: revert;
    padding-bottom: revert;
    border-bottom-width: revert;
}

/* Posted comment bodies that are editor HTML (bodyformat 1). The editor wraps every line in <p>, whose default bottom
   margin is far too generous for a tight conversation list, so it is tightened and dropped entirely on the last block.
   Lists keep a normal indent but lose the same excess spacing. */
.board-comment-body p {
    margin-bottom: .35rem;
}

.board-comment-body p:last-child,
.board-comment-body ul:last-child,
.board-comment-body ol:last-child {
    margin-bottom: 0;
}

.board-comment-body ul,
.board-comment-body ol {
    margin-bottom: .35rem;
    padding-left: 1.25rem;
}

/* long pasted URLs must not widen the right-hand column */
.board-comment-body a {
    word-break: break-word;
}

/* Matthew (AI), 2026-08-18, /errors Content expand toggle. Pure CSS on purpose: a Blazor state flip does not visibly update
   inside TelerikDialog, which does not re-render its DialogContent while open. Both the raw and reformatted <pre> blocks are
   rendered, and the hidden checkbox decides which is shown — so the toggle works without any render happening.
   Sibling selectors, so the checkbox must precede the label and both <pre> elements. */
.io-cx-on { display: none; }
.io-cx-fmt { display: none; }
.io-cx-toggle:checked ~ .io-cx-label .io-cx-off { display: none; }
.io-cx-toggle:checked ~ .io-cx-label .io-cx-on { display: inline; }
.io-cx-toggle:checked ~ .io-cx-raw { display: none; }
.io-cx-toggle:checked ~ .io-cx-fmt { display: block; }

/* Matthew (AI), 2026-08-18, lighten the loading-overlay scrim by half (MP): Telerik ships
   .k-loader-container-overlay{opacity:.5}, which reads as a very dark panel over the page. .25 halves it.
   Applies to every TelerikLoaderContainer in IO2 (~70 of them) from one place rather than per page.

   NOTE the selectors are deliberately more specific than Telerik's single class. app.css is linked BEFORE the Telerik
   stylesheets in App.razor (line 13 vs 50/53), so a same-specificity rule here would simply lose to theirs — the extra
   class is what makes this win without resorting to !important. */
.k-loader-container .k-loader-container-overlay,
.k-loader-container-overlay.k-overlay-dark,
.k-loader-container-overlay.k-overlay-light {
    opacity: .25;
}

/* Matthew (AI), 2026-08-18, keep the bookings grid's loading panel visible at the TOP (MP). TelerikGrid shows its own
   built-in loader over the grid during an OnRead, and Telerik centres it with
   .k-loader-container{display:flex;align-items:center;justify-content:center} — so on a long grid the spinner lands halfway
   down, often below the fold, and the grid just looks frozen. flex-start pins it to the top of the grid instead.

   Scoped to .joblisting-grid (the Class on that TelerikGrid) rather than applied globally, and two classes deep so it beats
   Telerik's single-class rule despite app.css being linked BEFORE the Telerik stylesheets in App.razor. */
.joblisting-grid .k-loader-container {
    align-items: flex-start;
    padding-top: .75rem;
}

/* Dylan (AI), 2026-08-19, per Dylan's request — subtle dashed divider between the two columns of FormRenderer's
   field grid (booking/create's Booking Details and booking/complete's Completion Details both use this component).
   #dee2e6 is Bootstrap's own border-color gray-300 (same tone as .border's default). Only shown from the md
   breakpoint up, matching the grid's own col-md-6 breakpoint in FormRenderer.razor — below md the grid collapses to
   one column, so the line is hidden rather than sitting uselessly down the middle of a stacked layout.

   NOTE this lives here, not in a FormRenderer.razor.css scoped file: App.razor's combined scoped-CSS bundle
   ("IO2.styles.css") is deliberately commented out app-wide (see the 2026-08-06 comment there), so a .razor.css file
   on a first-party component is never actually loaded — confirmed live via DevTools (the rule was simply absent from
   every loaded stylesheet). app.css is this project's real place for this kind of rule. */
.field-grid {
    position: relative;
}

@media (min-width: 768px) {
    .field-grid::before {
        content: "";
        position: absolute;
        /* Dylan (AI), 2026-08-19, per Dylan's follow-up ("start/end with a gap, thinner, dashes ~3x longer") — inset
           from the card's own top/bottom instead of 0 so the divider doesn't run flush to the row's edges, and the
           gradient below is built gap-first (transparent, then the dash) so the very first and last segments drawn
           are gaps, not dashes cut off mid-shape. */
        top: 20px;
        bottom: 20px;
        left: 50%;
        width: 0.5px;
        /* plain `border-left: dashed` gives the browser no way to control dash length/gap, so this is a repeating
           vertical gradient instead: a 12px gap, a 48px dash, then a 12px gap — consecutive gaps merge into a 24px
           spacing between dashes. translateX(-0.25px) centers the 0.5px-wide line on the 50% mark (a box of the
           same width sits to the right of its offset, not centered on it). */
        transform: translateX(-0.25px);
        background-image: repeating-linear-gradient(to bottom,
            transparent 0, transparent 12px,
            #dee2e6 12px, #dee2e6 60px,
            transparent 60px, transparent 72px);
    }
}

/* ============================================================================================================
   Matthew (AI), 2026-08-20, Developer Tools / API documentation (/dev/manage) styling.

   MOVED HERE from the scoped Manage.razor.css, which was never applied. Two independent reasons it was dead:
     1. App.razor has Blazor's combined scoped-CSS bundle ("IO2.styles.css") commented out - see Dylan's note there,
        2026-08-06 - so NO component's scoped stylesheet loads anywhere in IO2.
     2. Scoped rules only match elements in their own .razor file, and this markup lives in the ApiDocs/* child
        components (DocumentationContent, IntroContent, ChangeLogContent, TermsContent), not in Manage.razor.
   Which is why .devnav's `position: sticky` never took effect and the left-hand menu scrolled away (MP).

   Everything is prefixed .devtools (the wrapper div in Manage.razor) rather than made global: these selectors came
   from the legacy dev/manage.aspx <style> block and several are far too generic to let loose app-wide - `.code`,
   `.section`, `.text-bold`, and especially `span[id]`.

   The generated PDF does NOT use these; ApiDocPdfService carries its own inline copy (see its note ~line 281).
   ============================================================================================================ */
.devtools .code, .devtools .code2, .devtools code, .devtools .minipre {
    font-family: monospace;
    background-color: rgba(238,238,238,.3);
    border: 1px solid #d3d3d3;
    padding: 2px;
    color: #000;
    font-size: 14px;
}

.devtools .codeheader {
    background-color: #91cbfd4d;
}

.devtools .prettyprint {
    font-family: monospace;
    background-color: #f8f6cd;
    border: 1px solid #d3d3d3;
    padding: 6px;
    color: #000;
    font-size: 13px;
    white-space: pre-wrap;
    overflow: auto;
}

.devtools .heading_post {
    background-color: #e7f0f7;
    border: 1px solid #c3d9ec;
    font-size: 9pt;
    overflow: hidden;
    display: block;
    margin: 0;
    padding: 5px 0;
}

.devtools .heading_get {
    background-color: #E7F6EC;
    border: 1px solid #c3d9ec;
    font-size: 9pt;
    overflow: hidden;
    display: block;
    margin: 0;
    padding: 5px 0;
}

.devtools .http_method_post {
    background-color: #0F6AB4;
    color: #fff;
    padding: 9px;
}

.devtools .http_method_get {
    background-color: #10A54A;
    color: #fff;
    padding: 9px;
}

.devtools .path_post {
    padding: 0 10px;
    background-color: #E7F0F7;
}

.devtools .path_get {
    padding: 0 10px;
    background-color: #E7F6EC;
}

.devtools .pathright {
    padding: 0 10px;
    float: right;
    text-align: right;
}

.devtools .text-bold {
    font-weight: bold;
}

/* Matthew (AI), 2026-08-20, THIS is what stopped the menu sticking, and it has to come before .devnav to make sense of it.
   Telerik's theme sets `overflow: auto` on the tab panel (kendo-theme-default default-main.css line 44558, in the
   .k-tabstrip-content / .k-tabstrip > .k-content block). An element with a non-visible overflow becomes the nearest
   SCROLLPORT, and a sticky element sticks relative to its nearest scrollport - not the window. The panel is as tall as its
   own content, so it never scrolls, so the sticky offset never engaged and the menu just scrolled away with the page.

   Measured, not assumed: with the panel left at `overflow: auto` the menu sits at -2740px after scrolling 3000px; with it
   set to visible it holds at 70px. Neutralising body's `overflow-x: hidden` (sbadmin styles.css line 14965) instead makes
   NO difference - overflow on body propagates to the viewport, so it is not the blocker and is left alone.

   Both axes have to be `visible`: if only one is, the other computes back to `auto` and the scrollport returns. The tab
   panel therefore no longer scrolls its own content horizontally - which costs nothing here, because the wide things in
   these docs handle themselves (.prettyprint wraps and scrolls, and the tables are width:100%). */
.devtools .k-tabstrip-content,
.devtools .k-tabstrip > .k-content {
    overflow: visible;
}

/* Matthew (AI), 2026-08-20, the left-hand anchor menu stays put while the document scrolls (MP).
   `top: 70px` clears the fixed navbar. Sticky works here because the menu's containing block is the Bootstrap
   .col-3, which stretches to the height of the (much taller) content column, and because nothing between it and
   the document is a scroll container any more - Telerik's `overflow: auto` on the tab panel is overridden just above,
   which is what makes this work at all. max-height + overflow-y means a menu taller than the viewport scrolls itself instead of having its
   last entries clipped off the bottom; it is 18 links under 6 headings now and still growing. */
.devtools .devnav {
    position: sticky;
    top: 70px;
    font-size: small;
    max-height: calc(100vh - 90px);
    overflow-y: auto;
}

/* stops an anchor jump landing the target underneath the fixed navbar */
.devtools .section, .devtools span[id] {
    scroll-margin-top: 4em;
}

/* Dylan (AI), 2026-08-21, per Dylan's follow-up request — replaces an earlier whole-column blur overlay (which
   made the entire "Translation Booking"/"Actions" column unreadable while ANY of its data was still loading) with
   field-value- and panel-level placeholders instead: static labels/headers/layout render immediately (see
   View.razor's General tab markup), and only the specific value or panel that's genuinely still loading shows one
   of these. A shimmer animation alone would fail an accessibility check (a purely visual cue with nothing else
   backing it), so every element using these classes is paired with role="status"/aria-label="Loading" (or, for a
   value sitting inside text a screen reader already announces, aria-hidden plus a visually-hidden "(loading)")
   in the markup — see that file's own comments at each use site. Respects prefers-reduced-motion by disabling the
   shimmer's motion (the placeholder shape/color still communicates "loading" without the animation). */
.skeleton-value {
    display: inline-block;
    height: 0.95em;
    width: 6em;
    max-width: 100%;
    vertical-align: middle;
    border-radius: 4px;
    background: linear-gradient(90deg, #e3e6ea 25%, #f1f2f4 37%, #e3e6ea 63%);
    background-size: 400% 100%;
    animation: skeleton-shimmer 1.4s ease infinite;
}
.skeleton-value.skeleton-value-block {
    display: block;
    width: 100%;
}
.skeleton-value.skeleton-value-sm { width: 3.5em; }
.skeleton-value.skeleton-value-lg { width: 10em; }
.skeleton-panel-body .skeleton-value {
    margin-bottom: 0.35em;
}
@keyframes skeleton-shimmer {
    0% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}
@media (prefers-reduced-motion: reduce) {
    .skeleton-value { animation: none; background-position: 50% 50%; }
}

/* Matthew (AI), 2026-08-21, IVR Sequencing tab: the row(s) of the interpreter who ultimately took the call.

   This overrides --bs-table-accent-bg, NOT background-color, deliberately. Bootstrap paints striping as an inset box-shadow on
   the CELLS - ".table > :not(caption) > * > *" sets "box-shadow: inset 0 0 0 9999px var(--bs-table-accent-bg)", and
   ".table-striped > tbody > tr:nth-of-type(odd) > *" points that variable at the stripe colour. A background-color on the <tr>
   would therefore be painted over on every odd row, so the highlight would show on only half the rows it should.

   The first selector is qualified with the table element purely to out-specify
   ".table-striped > tbody > tr:nth-of-type(odd) > *", which is otherwise an exact specificity tie broken only by the order the
   stylesheets happen to load in. */
table.table-striped > tbody > tr.ivr-seq-accepted > *,
tr.ivr-seq-accepted > * {
    --bs-table-accent-bg: #c8e6c9;
    color: #14532d;
    font-weight: 600;
}