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

/* PersistedDataGrid: show the sort arrow only on the sorted column, so unsorted headers stay narrow. */
.persisted-data-grid .sort-direction-icon:not(.mud-direction-asc):not(.mud-direction-desc) {
    display: none;
}

:root {
    /* Space above a search result grid (page header, title row, margins); the grid fills the rest of the viewport. A page with other chrome overrides it on a wrapper. */
    --search-grid-offset: 17rem;
}

/* PersistedDataGrid: an empty (unfiltered) header filter icon only shows while the header cell is hovered or focused; filtered columns keep it visible.
   Touch devices (no hover) always show it. opacity keeps the layout stable and the button clickable. */
@media (hover: hover) {
    .persisted-data-grid th .filter-button:not(.filtered) {
        opacity: 0;
        transition: opacity 0.15s;
    }

    .persisted-data-grid th:hover .filter-button:not(.filtered),
    .persisted-data-grid th .filter-button:not(.filtered):focus-visible {
        opacity: 1;
    }
}

/* The grid's filter panel must always open above the columns panel; MudBlazor stacks popovers by open order. */
.mud-popover.filters-panel {
    z-index: calc(var(--mud-zindex-popover) + 5) !important;
}

/* Container resize mode sizes the table to its content; keep it at least as wide as the grid. */
.persisted-data-grid .mud-table-root {
    min-width: 100%;
}

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

/* Monitoring tab row layout: fixed-column grid so fields stay aligned across rows regardless of content length. Scoped to the Monitoring tab only - does not modify .resource-list-card, which sibling tabs (Roles, Courses, Qualifications) still use unchanged. */
.monitoring-list-row {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1.2fr 1fr 2fr 1fr;
    column-gap: 16px;
    align-items: center;
}

.monitoring-list-header {
    padding: 0 16px;
}

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

.mud-link.disabled {
    text-decoration-line: line-through !important;
}

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

.pre-wrap {
    white-space: pre-wrap;
}

.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 {
    min-width: 60px;
    justify-content: center;
}

    .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;
}
/* Compact grids (BoAssetInspections, work order inspection grids): fixed-width columns plus growing ones that share the remaining width. */
.compact-grid .mud-table-root {
    table-layout: auto;
    width: 100%;
    min-width: 100%;
}

.compact-grid .mud-table-cell {
    padding: 4px;
    white-space: nowrap;
}

.compact-grid .small-column {
    width: 100px;
}

.compact-grid .xs-column {
    width: 70px;
}

.compact-grid .date-column {
    width: 110px;
}

.compact-grid .normal-column {
    width: 120px;
}

.compact-grid .growing-column {
    width: auto;
    min-width: 150px;
    /* Let the table allocate space without long text setting the intrinsic width. */
    max-width: 0;
}

.ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.compact-grid .action-column .mud-icon-button {
    padding: 2px;
}