.fh-control-shell { width: 100%; }

.fh-control-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
}

.fh-control-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.fh-grid-shell { width: 100%; }

.fh-grid-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
}

.fh-grid-empty {
    color: var(--bs-secondary-color, #6c757d);
    font-size: 0.95rem;
    padding: 0.75rem;
}

.fh-tabs-shell { width: 100%; }

.fh-tabs-nav { margin-bottom: 0.75rem; }

.fh-tabs-content {
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: 0.375rem;
    padding: 0.75rem;
}

.fh-upload-shell { width: 100%; }

.fh-upload-help {
    color: var(--bs-secondary-color, #6c757d);
    font-size: 0.875rem;
    margin-top: 0.25rem;
}

.fh-modal-shell .modal-body {
    max-height: min(70vh, 40rem);
    overflow: auto;
}

.fh-tree-shell { min-width: max-content; width: 100%; }

.fh-tree-toolbar {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.fh-tree-scroll { overflow: auto; }

.fh-date-shell,
.fh-date-time-shell { width: 100%; }

.fh-date-input-group,
.fh-date-time-picker,
.fh-date-time-event-picker {
    flex-wrap: nowrap;
    width: 100%;
}

/* Keep date picker icon buttons aligned with Bootstrap input height. */

.fh-date-input-group > .form-control,
.fh-date-time-picker > .form-control,
.fh-date-time-event-picker > .form-control { min-height: calc(1.5em + 0.75rem + calc(var(--bs-border-width, 1px) * 2)); }

.fh-date-input-group > .form-control { min-width: 11rem; }

.fh-date-time-picker > .form-control,
.fh-date-time-event-picker > .form-control { min-width: 0; }

.fh-date-input-group > .input-group-text.clickable,
.fh-date-time-picker > .input-group-text.clickable,
.fh-date-time-event-picker > .input-group-text.clickable {
    align-items: center;
    display: inline-flex;
    justify-content: center;
    min-height: calc(1.5em + 0.75rem + calc(var(--bs-border-width, 1px) * 2));
    min-width: calc(1.5em + 1.5rem + calc(var(--bs-border-width, 1px) * 2));
    padding-left: 0.75rem;
    padding-right: 0.75rem;
}

.fh-date-input-group > .input-group-text.clickable > .bi,
.fh-date-time-picker > .input-group-text.clickable > .bi,
.fh-date-time-event-picker > .input-group-text.clickable > .bi {
    font-size: 1rem;
    line-height: 1;
}


@media (max-width: 575.98px) {
    .fh-date-input-group,
    .fh-date-time-picker,
    .fh-date-time-event-picker { flex-wrap: wrap; }

    .fh-date-input-group > .input-group-text:not(.clickable),
    .fh-date-time-picker > .input-group-text:not(.clickable),
    .fh-date-time-event-picker > .input-group-text:not(.clickable) {
        flex: 0 0 100%;
        margin-left: 0;
    }

    .fh-date-input-group > .form-control,
    .fh-date-time-picker > .form-control,
    .fh-date-time-event-picker > .form-control {
        border-bottom-left-radius: var(--bs-border-radius, 0.375rem);
        border-top-left-radius: var(--bs-border-radius, 0.375rem);
        flex: 1 1 auto;
        margin-left: 0;
        min-width: 0;
        width: 1%;
    }
}

.fh-help-toggle.btn { line-height: 1; }

.fh-help-toggle.btn i { font-size: 1.1rem; }

.fh-help-toggle.btn:hover,
.fh-help-toggle.btn:focus,
.fh-help-toggle.btn:focus-visible,
.fh-help-toggle.btn:active,
.fh-help-toggle.btn.active {
    background-color: var(--bs-primary, #0d6efd);
    border-color: var(--bs-primary, #0d6efd);
    box-shadow: none;
    color: var(--bs-white, #fff);
}

.fh-payrate-row {
    align-items: flex-start;
    column-gap: 1rem;
    display: grid;
    grid-template-columns: minmax(0, 20rem) minmax(11.5rem, max-content);
    margin-bottom: 0.5rem;
}

.fh-payrate-label {
    margin-bottom: 0;
    min-width: 0;
    padding-top: 0.2rem;
}

.fh-payrate-input-stack {
    min-width: 11.5rem;
    width: auto;
}

.fh-payrate-amount-group {
    margin-left: auto;
    width: 100%;
}

.fh-payrate-rate-note {
    margin-bottom: 0;
    white-space: nowrap;
}

@media (max-width: 767.98px) {
    .fh-payrate-row { display: block; }

    .fh-payrate-input-stack { width: 100%; }

    .fh-payrate-rate-note { white-space: normal; }
}

.fh-checkbox-list label {
    font-weight: normal;
    margin-left: 0.4rem;
}

.btn-outline-secondary {
    --bs-btn-color: #4c848d;
    --bs-btn-border-color: #4c848d;
    --bs-btn-hover-bg: #4c848d;
    --bs-btn-hover-border-color: #4c848d;
    --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: #3d6b73;
    --bs-btn-active-border-color: #3d6b73;
    --bs-btn-active-color: #fff;
}

.form-control::-webkit-file-upload-button,
.form-control::file-selector-button {
    background-color: #4c848d;
    border: 0;
    color: #fff;
    cursor: pointer;
}

.form-control:hover:not(:disabled):not([readonly])::-webkit-file-upload-button,
.form-control:hover:not(:disabled):not([readonly])::file-selector-button {
    background-color: #3d6b73;
}