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

html {
    scroll-behavior: smooth;
}

h1:focus {
    outline: none;
}

a, .btn-link {
    color: #0071c1;
}

.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;
}

.content {
    padding-top: 1.1rem;
}

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

.invalid {
    outline: 1px solid red;
}

.validation-message {
    color: red;
}

.loading-progress {
    position: relative;
    display: block;
    width: 8rem;
    height: 8rem;
    margin: 20vh auto 1rem auto;
}

    .loading-progress circle {
        fill: none;
        stroke: #e0e0e0;
        stroke-width: 0.6rem;
        transform-origin: 50% 50%;
        transform: rotate(-90deg);
    }

        .loading-progress circle:last-child {
            stroke: #1b6ec2;
            stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%;
            transition: stroke-dasharray 0.05s ease-in-out;
        }

.loading-progress-text {
    position: absolute;
    text-align: center;
    font-weight: bold;
    inset: calc(20vh + 3.25rem) 0 auto 0.2rem;
}

    .loading-progress-text:after {
        content: var(--blazor-load-percentage-text, "Loading");
    }

code {
    color: #c02d76;
}

.mud-table-cell {
    cursor: default;
}

/* Ensure MudDataGrid headers are always bold */
.mud-table-head .mud-table-cell,
.mud-data-grid .mud-table-head .mud-table-cell {
    font-weight: 700 !important;
}

.row-warning {
    background-color: var(--mud-palette-warning-hover);
}

.row-error {
    background-color: var(--mud-palette-error-hover);
}

.row-new {
    background-color: var(--mud-palette-info-hover);
}

.row-account-only {
    background-color: var(--mud-palette-success-hover);
}

.account-only-chip {
    background-color: var(--mud-palette-success-darken) !important;
    color: var(--mud-palette-success-text) !important;
}

.plan-window-conflict {
    background-color: var(--mud-palette-warning-hover);
}

.row-selected {
    background-color: var(--mud-palette-lines-inputs) !important;
}

.color-text-secondary {
    color: var(--mud-palette-text-secondary);
}

/* Shared "list card" style used by resource tabs (Roles, Courses, Qualifications, Monitoring) */
.resource-list-card {
    background-color: white;
    border: 1px solid #e0e0e0;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
}

.resource-list-card:hover {
    background-color: #f5f5f5;
    transform: translateY(-1px);
    box-shadow: var(--mud-elevation-2);
}

.disabled {
    color: var(--mud-palette-text-disabled);
    text-decoration-line: line-through;
}

.read-only {
    color: var(--mud-palette-text-disabled);
}

.card-header {
    text-transform: uppercase !important;
    color: var(--mud-palette-tertiary-darken);
}

.card-label {
    color: var(--mud-palette-text-secondary);
    font-family: var(--mud-typography-body1-family);
    font-weight: var(--mud-typography-body1-weight);
    font-size: var(--mud-typography-body1-size);
    line-height: var(--mud-typography-body1-lineheight);
    letter-spacing: var(--mud-typography-body1-letterspacing);
    text-transform: var(--mud-typography-body1-text-transform);
}

.card-data {
    font-family: var(--mud-typography-body1-family);
    font-weight: bold !important;
    font-size: var(--mud-typography-body1-size);
    line-height: var(--mud-typography-body1-lineheight);
    letter-spacing: var(--mud-typography-body1-letterspacing);
    text-transform: var(--mud-typography-body1-text-transform);
}

.font-italic {
    font-style: italic;
}

.font-bold {
    font-weight: bold !important;
}

.nowrap {
    white-space: nowrap;
}

.uppercase {
    text-transform: uppercase !important;
}

.preserve-whitespace {
    white-space: pre-line;
}

.full-width {
    width: 100%;
}

.transparent {
    background-color: rgba(0, 0, 0, 0) !important;
}

.cursor-pointer {
    cursor: pointer;
}

    .cursor-pointer .mud-table-cell {
        cursor: pointer;
    }

.word-break-all {
    word-break: break-all;
}

/* Center pagination */
.mud-table-pagination {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
}

@media (max-width: 600px) {
    .mud-xs-table:not(.use-defaults) .mud-table-body {
        background-color: var(--mud-palette-background);
    }

    .mud-table.mud-data-grid.mud-xs-table.mud-elevation-1 {
        box-shadow: none;
    }

    .mud-xs-table:not(.use-defaults) .mud-table-row {
        margin-bottom: 8px;
        padding: 8px;
        background: white;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        border: 1px solid #e0e0e0;
        border-radius: 4px;
        display: block !important;
    }

    .mud-xs-table.use-some-defaults .mud-table-row {
        box-shadow: none;
        border: none;
        border-radius: 0;
    }

    .mud-scroll-to-top.visible.fixed-actionbar-bottom {
        bottom: 74px;
        right: 37px;
    }

    .mud-xs-table:not(.use-defaults) .mud-table-cell {
        justify-content: unset !important;
    }

    .mud-xs-table .mud-table-cell.no-header-xs::before {
        content: none;
    }

    .mud-xs-table:not(.use-defaults) .mud-table-cell::before {
        color: var(--mud-palette-text-secondary);
    }

    .hide-xs {
        display: none !important;
    }

    .mud-xs-table:not(.use-defaults) .mud-table-row .mud-table-cell:last-child {
        border-bottom: none !important;
    }
}

.mud-paper .mud-card-header {
    padding-bottom: 0;
}

/* Three column responsive grid layout */
.three-column-grid {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas: 'first' 'second' 'third';
    margin-top: 8px;
}

/* Placed by explicit grid-column instead of a named area, so a page can opt a
   footer into spanning the full grid it's directly inside, without every
   three-column-grid consumer gaining an empty reserved row. */
.grid-span-full {
    grid-column: 1 / -1;
}

/* Pairs with .grid-group below: an independent column beside a group of two
   columns that collapse into one stacked column on narrower viewports.
   Flex siblings don't share row height, so this column's height never
   affects where content inside the group lands (and vice versa) - unlike
   nesting everything in one CSS grid, where the tallest item in a row forces
   every other column sharing that row to be that tall. */
.grid-with-group {
    display: flex;
    flex-direction: column;
    gap: 24px;
    margin-top: 8px;
}

@media (min-width: 960px) {
    .grid-with-group {
        flex-direction: row;
        align-items: flex-start;
        column-gap: 24px;
    }

    .grid-with-group > .grid-col,
    .grid-with-group > .grid-group {
        min-width: 0;
        flex: 1 1 0;
    }
}

@media (min-width: 1280px) {
    /* The group only splits into two side-by-side columns at this tier, so
       it needs twice the first column's share to keep each sub-column the
       same width as the first column. Below this it's still a single
       stacked column and should split the row 50/50 instead. */
    .grid-with-group > .grid-group {
        flex: 2 1 0;
    }
}

/* The two grouped columns: stacked (second above third) below 1280px so the
   third column collapses into the second, side by side above it. */
.grid-group {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* .grid-group's own gap already spaces every child (each wrapper holds a
   single card), so the card's usual margin-bottom would double that
   spacing on top of the gap. */
.grid-group > * > .checkit-card {
    margin-bottom: 0;
}

@media (min-width: 1280px) {
    .grid-group {
        display: grid;
        grid-template-columns: 1fr 1fr;
        column-gap: 24px;
        row-gap: 24px;
        align-items: start;
    }
}

/* Two column responsive grid layout */
.two-column-grid {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas: 'first' 'second';
    margin-top: 8px;
}

/* Default (for smaller screens) */
.mud-paper-adm-dynamic {
    height: auto; /* Allows dynamic height adjustment */
}

/* For larger screens */
@media (min-width: 992px) {
    .mud-paper-adm-dynamic {
        height: 80px;
    }
}

@media (min-width: 960px) {
    .three-column-grid {
        column-gap: 24px;
        grid-template-columns: 1fr 1fr;
        grid-template-areas:
            'first second'
            'first third';
    }

    .two-column-grid {
        column-gap: 24px;
        grid-template-columns: 1fr 1fr;
        grid-template-areas: 'first second';
    }
}

@media (min-width: 1280px) {
    .three-column-grid {
        grid-template-columns: 1fr 1fr 1fr;
        grid-template-areas: 'first second third';
    }

    .two-column-grid {
        grid-template-columns: 1fr 1fr;
        grid-template-areas: 'first second';
    }
}

/* Four column responsive grid layout */
.four-column-grid {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas:
        "header"
        "first"
        "second"
        "third"
        "fourth";
    gap: 16px;
}

@media (min-width: 600px) {
    .four-column-grid {
        grid-template-columns: repeat(2, 1fr);
        grid-template-areas:
            "header header"
            "first second"
            "third fourth";
    }
}

@media (min-width: 1200px) {
    .four-column-grid {
        grid-template-columns: repeat(4, 1fr);
        grid-template-areas:
            "header header header header"
            "first second third fourth";
    }
}

.main-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 100%;
    width: 100%;
    margin-bottom: 10px;
    padding-bottom: 0px;
}

.main-content {
    max-width: 100% !important;
    width: 100% !important;
}

.mud-input-control > .mud-input-control-input-container > .mud-input-label-inputcontrol {
    line-height: unset !important;
}

.mud-table-cell .mud-button-root.mud-icon-button.mud-ripple.mud-ripple-icon {
    color: var(--mud-palette-primary);
}

.flex-break {
    width: 100%;
}

/* Custom CheckIT CSS below */

/*
    example if using mudblazor classes
    px-2 px-sm-4 px-md-6 px-lg-10 pt-18
*/

.checkit-main-content {
    padding-top: 64px;
    padding-left: 8px;
    padding-right: 8px;
}

/* sm - small screen 600 - 960 */
@media (min-width: 600px) {
    .checkit-main-content {
        padding-top: 72px;
        padding-left: 16px;
        padding-right: 16px;
    }
}

/* md - medium screen 960 - 1280 */
@media (min-width: 960px) {
    .checkit-main-content {
        padding-left: 24px;
        padding-right: 24px;
    }
}

/* lg - large screen 1280 - x */
@media (min-width: 1280px) {
    .checkit-main-content {
        padding-left: 40px;
        padding-right: 40px;
    }
}

.checkit-main-menu-drawer {
    top: calc(var(--mud-appbar-height) - var(--mud-appbar-height) / 8);
    padding-top: 15px;
}

.checkit-search-drawer {
    top: calc(var(--mud-appbar-height) - var(--mud-appbar-height) / 8);
    height: 100%;
    width: 350px;
}

@media (min-width: 600px) {
    .checkit-main-menu-drawer {
        top: var(--mud-appbar-height);
    }

    .checkit-search-drawer {
        top: var(--mud-appbar-height);
    }
}

/* Expansion Panel */
.checkit-expand-panel {
    background-color: var(--mud-palette-background);
}

    .checkit-expand-panel.mud-panel-expanded {
        padding: 0px;
        margin: 0px;
    }

    .checkit-expand-panel .mud-expand-panel-header {
        padding: 0px;
        margin: 0px;
        min-height: 0px;
    }

    .checkit-expand-panel .mud-expand-panel-content {
        padding-bottom: 0px;
    }

/* Card */

.checkit-card {
    width: 100%;
    height: auto;
    margin-bottom: 16px;
}

@media (min-width: 960px) {
    .checkit-card {
        margin-bottom: 24px;
    }
}

.checkit-card .mud-card-header-content .mud-typography-caption {
    display: flex;
    color: var(--mud-palette-tertiary);
    text-transform: uppercase;
    font-weight: 500;
    line-height: 20px;
}

.checkit-card .mud-card-header-content .mud-chip {
    margin-top: 0px;
    margin-bottom: 0px;
    margin-right: 0px;
}

.checkit-card .mud-card-header-content .mud-typography-h6 {
    color: var(--mud-palette-text-primary);
    line-height: 32px;
}

.checkit-card .mud-card-content .mud-typography-caption {
    color: var(--mud-palette-text-secondary);
}

.checkit-card .field-label {
    color: var(--mud-palette-text-secondary);
    font-size: var(--mud-typography-caption-size);
    font-family: var(--mud-typography-caption-family);
    font-weight: var(--mud-typography-caption-weight);
    line-height: var(--mud-typography-caption-lineheight);
    letter-spacing: var(--mud-typography-caption-letterspacing);
    text-transform: var(--mud-typography-caption-text-transform);
}

.checkit-card .field-value {
    /* Indeed, same as form label in checkit-dialog... */
    font-weight: 700;
    font-size: var(--mud-typography-body1-size);
    font-family: var(--mud-typography-body1-family);
    line-height: var(--mud-typography-body1-lineheight);
    letter-spacing: var(--mud-typography-body1-letterspacing);
    text-transform: var(--mud-typography-body1-text-transform);
    word-wrap: break-word;
}

/* Dialog */

.checkit-dialog {
}

    .checkit-dialog .form-label {
        /* Indeed, same as field value in checkit-card... */
        font-weight: 700;
        font-size: var(--mud-typography-body1-size);
        font-family: var(--mud-typography-body1-family);
        line-height: var(--mud-typography-body1-lineheight);
        letter-spacing: var(--mud-typography-body1-letterspacing);
        text-transform: var(--mud-typography-body1-text-transform);
    }

    .checkit-dialog .mud-dialog-title {
        padding: 16px;
        margin: 0;
    }

    .checkit-dialog .mud-dialog-content {
        padding: 0 16px 0 16px;
        margin: 0;
    }

    .checkit-dialog .mud-dialog-actions {
        padding: 16px;
        margin: 0;
    }

.align-mud-icon-button-left .mud-icon-button {
    margin-left: -12px;
}

.checkit-dialog-content-height {
    height: 60vh;
}

/* Let the Connections tab table use the full available dialog height. */
.edit-contact-dialog .mud-tabs {
    height: 100%;
}

.edit-contact-dialog .mud-tabs .mud-tabs-panels {
    flex: 1 1 auto;
    min-height: 0;
}

    .edit-contact-dialog .mud-tabs .mud-tabs-panels > .mud-tabpanel {
        height: 100%;
    }

.edit-contact-dialog .connections-tab-content {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
}

.edit-contact-dialog .connections-table {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
}

    .edit-contact-dialog .connections-table .mud-table-container {
        flex: 1 1 auto;
        height: auto;
        max-height: none !important;
    }

@media (max-width: 600px) {
    /* The dialog is position: fixed, so its width resolves against its
       containing block, not the viewport. MudBlazor's FullWidth/MaxWidth
       classes size it as calc(100% - 64px), which leaves a hard minimum width
       whenever that containing block is wider than the viewport. Size it from
       the viewport instead. */
    .mud-dialog-container:has(.edit-contact-dialog) {
        /* MudBlazor's .mud-dialog-center vertically centres the dialog, which
           leaves a growing gap above it as the dialog gets shorter. Pin it to
           the top instead. */
        align-items: flex-start;
        padding: 0;
        width: 100dvw;
        overflow: hidden;
    }

    .edit-contact-dialog.mud-dialog {
        box-sizing: border-box;
        margin: 16px !important;
        min-width: 0 !important;
        width: calc(100dvw - 32px) !important;
        max-width: calc(100dvw - 32px) !important;
        max-height: calc(100dvh - 32px);
        overflow: hidden;
    }

    .edit-contact-dialog .checkit-dialog-content-height {
        height: auto;
        max-height: calc(100dvh - 144px);
    }

    .edit-contact-dialog .mud-dialog-content {
        overflow-x: hidden;
    }

    .edit-contact-dialog .mud-dialog-actions {
        flex-wrap: wrap;
        margin: 0 !important;
    }

    .checkit-dialog-fullscreen-xs {
        width: calc(100%);
        height: calc(100%);
        max-height: calc(100%);
    }

        .checkit-dialog-fullscreen-xs .mud-input-control.mud-input-control-boolean-input {
            margin-left: -5px !important;
        }
}

.checkit-chip {
}

    .checkit-chip .mud-button-root.mud-icon-button.mud-ripple.mud-ripple-icon {
        color: initial;
    }

/* Drawer Layout Classes */

.checkit-drawer-sticky-header {
    position: sticky;
    top: 0;
    z-index: 1;
    background-color: var(--mud-palette-surface);
    border-bottom: 1px solid var(--mud-palette-divider);
}

.checkit-drawer-scrollable-content {
    overflow-y: auto;
    height: max(20rem, calc(100vh - var(--mud-appbar-height) - 64px));
    padding: 0;
}

@media (min-width: 600px) {
    .checkit-drawer-scrollable-content {
        height: max(20rem, calc(100vh - var(--mud-appbar-height) - 64px));
    }
}

.spinner-overlay {
    height: 40vh;
}

.spinner-page-overlay {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: rgba(255, 255, 255, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
}

.mud-dialog-content .spinner-overlay {
    height: 100%;
    position: absolute;
    z-index: 1;
    padding: 0;
    width: calc(100% - 25px);
    background: white;
    z-index: 100;
}

.center-vertical {
    display: flex;
    align-items: center;
}

.checkit-tab {
}

    .checkit-tab .mud-tabs-tabbar {
        background-color: var(--mud-palette-background);
    }

.mud-grid {
    width: calc(100% + 8px);
    margin-left: -8px;
    margin-top: -8px;
}

    .mud-grid .mud-grid-item {
        padding-left: 8px;
        padding-top: 8px;
    }

.checkit-select-group {
}

    .checkit-select-group .mud-list-item-icon {
        display: none;
    }

    .checkit-select-group .mud-list-item-text p {
        color: var(--mud-palette-text-primary);
        font-weight: 500;
    }

.editable-cell {
    background-color: var(--mud-palette-action-default-hover) !important;
}

.overridden-value {
    text-decoration: line-through;
    color: gray;
}

.select-field-white {
    background-color: white !important;
    border-radius: 4px;
}

/* Keyboard navigation - Jump to row mode */
.mud-table.show-row-numbers tbody {
    counter-reset: row-number;
}

    .mud-table.show-row-numbers tbody tr {
        counter-increment: row-number;
    }

        .mud-table.show-row-numbers tbody tr td:first-child {
            position: relative;
        }

            .mud-table.show-row-numbers tbody tr td:first-child::before {
                content: counter(row-number);
                position: absolute;
                left: 2px;
                top: 0;
                background: rgba(25, 118, 210, 0.15);
                color: rgba(25, 118, 210, 0.8);
                padding: 2px 6px;
                border-radius: 3px;
                font-size: 10px;
                font-weight: 500;
                min-width: 18px;
                text-align: center;
                pointer-events: none;
                z-index: 1;
            }

.row-jump-input {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    padding: 8px 16px;
    border: 2px solid #1976d2;
    border-radius: 4px;
    font-size: 14px;
    z-index: 9999;
    width: 200px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

    /* Hide increment/decrement buttons on number input */
    .row-jump-input::-webkit-outer-spin-button,
    .row-jump-input::-webkit-inner-spin-button {
        -webkit-appearance: none;
        margin: 0;
    }

    .row-jump-input[type=number] {
        -moz-appearance: textfield;
    }

/* Table cell truncation utilities */
.table-cell-truncate {
    max-width: 250px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.table-cell-truncate-sm {
    max-width: 100px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.table-cell-truncate-lg {
    max-width: 400px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.table-cell-wrap {
    max-width: 200px;
    white-space: normal;
    word-wrap: break-word;
}

.tooltip-content {
    max-width: 400px;
    white-space: normal;
    word-wrap: break-word;
}

.checklist-tree .mud-expand-panel .mud-expand-panel-content.mud-expand-panel-gutters {
    padding: 0 !important;    
}

.checklist-tree .mud-expand-panel .mud-expand-panel-header {
    padding-left: 0 !important;
}

.checklist-tree .checklist-item-row {
    padding-top:8px;
}
.checklist-tree .mud-expand-panel-content.mud-expand-panel-gutters .mud-expansion-panels > .checklist-item-row {
    padding-top: 0;
}