/* Never render the notification badge (::after) when the count is zero —
   e.g. the server-rendered default before getNotis() runs. */
[data-badge-count="0"]:after {
    display: none;
}

.calendar.fc .fc-daygrid-dot-event {
    background: unset;
}

.calendar.fc .fc-daygrid-event {
    border-radius: unset;
}

/* Nudge absolutely-positioned event harnesses down/right by 4px so block
   events sit consistently with the inset of the day (dot) events. */
.calendar.fc .fc-daygrid-event-harness-abs {
    margin-top: 4px;
    margin-left: 4px;
    margin-right: 4px;
}

/* Phosphor spin animation (replaces the old mdi-spin) */
.ph-spin {
    animation: ph-spin 1s linear infinite;
    display: inline-block;
}

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

.calendar.fc .fc-toolbar.fc-header-toolbar {
    min-height: 4rem;
}


.form-double-floating-custom > div.choices > div.choices__inner > div.choices__list {
    padding-left: 98px;
}

/* Choices floating labels */
.form-floating > .choices:focus ~ label, .form-floating > .choices:not(:placeholder-shown) ~ label, .form-floating > .choices ~ label {
    color: rgba(var(--bs-body-color-rgb),.65);
    -webkit-transform: scale(.85) translateY(-.5rem) translateX(.15rem);
    transform: scale(.85) translateY(-.5rem) translateX(.15rem)
}

.form-floating > .choices > .choices__inner {
    padding: 1rem .75rem;
}

    .form-floating > .choices > .choices__inner:focus, .form-floating > .choices > .choices__inner:not(:placeholder-shown) {
        padding-top: 1.925rem;
        padding-bottom: .625rem;
    }

    .form-floating > .choices > .choices__inner > .choices__input {
        float: right;
        position: absolute;
        display: none;
    }

.form-floating.multi-select-search-enabled > .choices > .choices__inner > .choices__input {
    float: unset;
    position: unset;
    display: unset;
}

.choices__inner {
    display: block;
    width: 100%;
    padding: .6rem .85rem;
    font-size: .8125rem;
    font-weight: 400;
    line-height: 1.5;
    color: var(--bs-body-color);
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: transparent;
    background-clip: padding-box;
    border: 1px solid var(--bs-theme-500);
    border-radius: .25rem;
    box-shadow: 0 0 #0000;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

.is-focused .choices__inner, .is-open .choices__inner {
    color: var(--bs-body-color);
    background-color: white;
    border-color: #1e91ff;
    outline: 0;
    box-shadow: 0 0 #0000, 0 0 0 1px #1e91ff;
}

.is-open .choices__inner {
    border-radius: .25rem;
}

.copy-text {
    cursor: pointer;
    text-decoration-style: dotted;
    text-decoration-line: underline;
}

.text-right {
    text-align: right;
}

.choices__list--dropdown, .choices__list[aria-expanded] {
    z-index: 3;
}

/* Candidate billing sub-row toggle: rotate the chevron when the sub-row is expanded.
   display:inline-block is required — transform is ignored on inline elements, and the
   .mdi <i> is inline by default (only .mdi:before is inline-block). */
.billing-toggle .billing-toggle-chevron {
    display: inline-block;
    transition: transform .2s ease;
}

.billing-toggle[aria-expanded="true"] .billing-toggle-chevron {
    transform: rotate(180deg);
}

.h-75px {
    height: 75px;
}

.w-90 {
    width: 90px;
}

.w-110 {
    width: 110px;
}

.w-120 {
    width: 120px;
}

.w-130 {
    width: 130px;
}

.w-200 {
    width: 200px;
}

.w-250 {
    width: 250px;
}

.w-350 {
    width: 350px;
}

.mw-400 {
    min-width: 400px;
}

.mw-450 {
    min-width: 450px;
}

.mw-500 {
    min-width: 500px;
}

.mw-550 {
    min-width: 550px;
}

.mw-600 {
    min-width: 600px;
}

.mw-650 {
    min-width: 650px;
}

.b-0 {
    border: 0;
}

.billing-totals-row td {
    font-weight: 500;
    color: #6a95b9 !important;
    font-size: .75rem
}

.table th {
    vertical-align: middle;
}

.form-control, .choices__inner, .form-select {
    background-color: white;
}

.choices {
    margin-bottom: 0px;
}

.form-control:focus {
    background-color: white;
}

/* GridJS fixedHeader (course/init.js sets fixedHeader:true and the Trainings view
   scrolls the body inside .gridjs-wrapper). The mermaid theme makes the header
   `position: sticky` but never gives it a z-index, so it stays at z-index:auto and the
   scrolling body's interactive controls (website toggle, action buttons) paint over the
   top of it. Lifting the sticky header above the body keeps it on top while scrolling. */
th.gridjs-th-fixed {
    z-index: 5;
}

.pr-0 {
    padding-right: 0px !important;
}

.ml-1 {
    margin-left: 1px;
}

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

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

.candidate-tab {
    border-radius: 0px !important;
}

input:disabled {
    background-color: #f7f7f7 !important;
    cursor: not-allowed !important;
}

.empty-badge {
    display: block !important;
    height: 24px;
    width: 24px;
}

.fs-28 {
    font-size: 28px;
}

.fs-20 {
    font-size: 20px;
}

/* Organisation profile card — brand header.
   Generic across every tenant: each client's logo-dark.png differs in size and aspect
   ratio, so the logo is centred and scaled to fit (object-fit: contain) inside a
   fixed-height panel. It never crops or overflows the card, whatever its shape. The
   panel picks up the tenant's brand colour as a soft tint when one is defined
   (--bs-bg-brand-colour) and falls back to neutral grey otherwise. */
.org-brand-header {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    height: 130px;
    padding: 1.25rem 1.5rem 0;
    background-color: #f4f5f7;
    background-image: linear-gradient(135deg,
        color-mix(in srgb, var(--bs-bg-brand-colour, #64748b) 16%, transparent),
        color-mix(in srgb, var(--bs-bg-brand-colour, #64748b) 4%, transparent));
    border-bottom: 1px solid rgba(0, 0, 0, .06);
}

.org-brand-logo {
    max-width: 100%;
    max-height: 62px;
    object-fit: contain;
}

/* ============================================================
   Branded left sidebar
   ------------------------------------------------------------
   Fill Materia's left menu (#sidebar) with the tenant's brand colour on every
   breakpoint — the desktop icon rail AND the mobile slide-out drawer. The hover
   fly-out / submenu panels use a lighter shade of the same colour.

   Each company sets these at :root in
   wwwroot/company/{registrationId}/assets/css/default.css:

       --cms-sidebar-bg          main menu colour (the brand colour)
       --cms-sidebar-fg          main idle icon + label   (default white 72%)
       --cms-sidebar-fg-active   main active / hover       (default white)
       --cms-sidebar-highlight   halo behind the active rail icon (white 18%)
       --cms-sidebar-sub-bg      submenu panel  (default: brand lightened toward white)
       --cms-sidebar-sub-fg      submenu text   (default: dark navy)

   Light brands (e.g. THS lime) override --cms-sidebar-fg to a dark colour; the
   submenu defaults already assume a light panel with dark text, so they usually
   need no per-client override.
   Unset (unbranded build) → neutral dark menu, so the white text still reads.
   ============================================================ */

/* Main menu — brand colour on the rail (desktop) and the drawer (mobile) */
#sidebar {
    background-color: var(--cms-sidebar-bg, #1e2f39);
}

/* Main menu section headers: icon + label */
#sidebar .menu > li > a,
#sidebar .menu > li > div {
    color: var(--cms-sidebar-fg, rgba(255, 255, 255, .72));
}

/* Active or hovered section → full-strength colour */
#sidebar .menu > li:hover > a,
#sidebar .menu > li:hover > div,
#sidebar .menu > li:has(a.active) > a,
#sidebar .menu > li:has(a.active) > div {
    color: var(--cms-sidebar-fg-active, #fff);
}

/* Halo behind the active / hovered rail icon — Materia's faint blue
   disappears on a coloured rail. */
#sidebar .menu > li > a > .ph:after,
#sidebar .menu > li > div > .ph:after {
    background-color: var(--cms-sidebar-highlight, rgba(255, 255, 255, .18));
}

/* "CMS" wordmark shown beside the logo on the mobile drawer.
   Bootstrap's .text-body-emphasis utility sets colour with !important, so match it. */
#sidebar .logo .text-body-emphasis {
    color: var(--cms-sidebar-fg-active, #fff) !important;
}

/* --- Submenu / fly-out panel: a lighter shade of the main colour --------- */
#sidebar .menu > li > ul {
    background-color: var(--cms-sidebar-sub-bg,
        color-mix(in srgb, var(--cms-sidebar-bg, #1e2f39) 42%, #fff));
    /* recolour every link inside the panel for the lighter surface */
    --menu-link-color: var(--cms-sidebar-sub-fg, #0f2233);
}

/* Selected link → a solid brand pill that pops on the lighter panel */
#sidebar .menu > li > ul > li > a.active {
    --menu-link-color: var(--cms-sidebar-fg-active, #fff);
    --menu-link-bg: var(--cms-sidebar-bg, #1e2f39);
}

/* Hovered links + nested (menu-sub) rows */
#sidebar .menu > li > ul > li > a:not(.active):hover,
#sidebar .menu-sub > ul > li:hover > a,
#sidebar .menu-sub > ul > li > a.active {
    --menu-link-color: var(--cms-sidebar-sub-fg, #0f2233);
    --menu-link-bg: rgba(0, 0, 0, .06);
    background-color: rgba(0, 0, 0, .06);
}

/* Expandable group toggle (e.g. Companies) when open — keep it dark, not blue */
#sidebar .menu-sub.active > a,
#sidebar .menu-sub.opened > a {
    --menu-link-color: var(--cms-sidebar-sub-fg, #0f2233);
}

/* Mobile drawer: submenu rows are full-width, so Materia's desktop pill radius
   (50rem = a stadium) makes the selected row look like an oversized capsule.
   Use a tidy rounded rectangle instead. */
@media (max-width: 1199.98px) {
    #sidebar .menu > li > ul > li > a,
    #sidebar .menu-sub > ul > li > a {
        border-radius: .5rem;
    }
}

/* Logo: the reversed (white) variant reads on a dark / coloured menu.
   Light-brand tenants (THS) flip this in their own default.css. */
#sidebar .logo .logo-img--light { display: block; }
#sidebar .logo .logo-img--dark { display: none; }

/* ── Report pages: fit the results card to the screen ──────────────────────────
   Reports (/reports/*) render a server-built <table> inside .card > .card-body.
   With no height cap a long table grows the whole page, pushing the Export button
   below the fold so the user has to scroll the entire page to reach it. Capping the
   card at the viewport height — the same idea as the full-height Diary/calendar —
   makes the table scroll INSIDE the card: the title stays above and the Export
   button stays pinned at the bottom. It's max-height, not height, so short reports
   are untouched and only tall ones start scrolling internally.
   Scoped to .report-fill (added to .content-body on the report views). */
.report-fill {
    max-height: 100dvh;
    max-height: 100vh;
    display: flex;
    flex-direction: column;
}

    /* Title/subtitle stay put; only the table scrolls. */
    .report-fill > .header {
        flex-shrink: 0;
    }

    /* .card is already a column flex box in Bootstrap — let it shrink so the body
       inside it can own the scroll. */
    .report-fill > .card {
        min-height: 0;
        margin-bottom: 0;
    }

        .report-fill > .card > .card-body {
            min-height: 0;
            display: flex;
            flex-direction: column;
        }

    /* The one scrolling region. overflow works on both axes on purpose — the Invoice
       report is also very wide, so it keeps its horizontal scroll too. */
    .report-fill .table-responsive {
        flex: 1 1 auto;
        min-height: 0;
        overflow: auto;
    }

    /* Export button row sits directly under the table and never scrolls off. */
    .report-fill .card-body > form {
        flex-shrink: 0;
        padding-top: .75rem;
    }

    /* Keep the column headers visible while the body scrolls. The header cells already
       paint an opaque fill via Bootstrap's --bs-table-bg-state (an inset 9999px
       box-shadow that DataTableHelper sets inline), so they cover the rows cleanly —
       don't set box-shadow here or it overrides that fill and the header goes blank. */
    .report-fill .table-responsive thead th {
        position: sticky;
        top: 0;
        z-index: 2;
    }

/* Email-disconnected banner (EmailAuthWarning view component), injected as the first
   child of #content above @RenderBody.

   On a page WITH a secondary sidebar the theme turns SimpleBar's .simplebar-content into
   a flex row (sidebar + content-body). A full-width banner doesn't fit that row model:
   flex-wrap breaks the line using each item's preferred width, so a wide content-body
   (e.g. the sent-emails table) is pushed onto its own line below the sidebar and leaves
   a large empty gap. Switch that one container to a 2-column grid instead — the banner
   spans a full top row, the sidebar and content sit in the row beneath it. The content
   column is minmax(0,1fr) so wide tables scroll rather than blowing the layout out.
   Scoped to the sidebar case; plain pages don't flex, so the banner is already a
   full-width block there (grid-column below is simply ignored). */
#content .simplebar-wrapper:has(#sidebar-secondary) .simplebar-content:has(> .cms-email-auth-alert) {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr);
    align-content: start;
}

/* SimpleBar's clearfix ::before/::after would otherwise show up as stray grid items. */
#content .simplebar-wrapper:has(#sidebar-secondary) .simplebar-content:has(> .cms-email-auth-alert)::before,
#content .simplebar-wrapper:has(#sidebar-secondary) .simplebar-content:has(> .cms-email-auth-alert)::after {
    display: none;
}

.cms-email-auth-alert {
    grid-column: 1 / -1;
}