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-selected {
    background-color: var(--mud-palette-lines-inputs) !important;
}

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

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

/* 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';
    }
}

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

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

@media (max-width: 600px) {
    .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: calc(100vh - var(--mud-appbar-height) - 64px);
    padding: 0;
}

@media (min-width: 600px) {
    .checkit-drawer-scrollable-content {
        height: 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;
}