/**
 * SeedQuest UI Shell
 *
 * A flat, dense compatibility layer for legacy BreedBase markup. Native
 * SeedQuest pages and embedded native workspaces retain their component CSS.
 */

:root {
    --sq-shell-bg: #f3f6f4;
    --sq-shell-surface: #ffffff;
    --sq-shell-surface-muted: #f7f9f8;
    --sq-shell-surface-strong: #edf3ef;
    --sq-shell-ink: #17382c;
    --sq-shell-text: #31483f;
    --sq-shell-muted: #5b6f66;
    --sq-shell-faint: #7a8c84;
    --sq-shell-line: #d7e2dc;
    --sq-shell-line-strong: #becfc5;
    --sq-shell-primary: #1d6b4e;
    --sq-shell-primary-dark: #14513b;
    --sq-shell-primary-soft: #e9f3ed;
    --sq-shell-blue: #1d4ed8;
    --sq-shell-blue-soft: #eff6ff;
    --sq-shell-amber: #94600f;
    --sq-shell-amber-soft: #fff8e7;
    --sq-shell-red: #a33b36;
    --sq-shell-red-soft: #fbeceb;
    --sq-shell-radius-sm: 6px;
    --sq-shell-radius: 9px;
    --sq-shell-radius-lg: 12px;
    --sq-shell-shadow-sm: 0 2px 8px rgba(23, 56, 44, 0.045);
    --sq-shell-shadow-dialog: 0 24px 64px rgba(15, 36, 28, 0.24);
    --sq-shell-focus: 0 0 0 3px rgba(29, 107, 78, 0.19);
}

html.sq-ui-shell,
html.sq-ui-shell body {
    background: var(--sq-shell-bg);
    color: var(--sq-shell-text);
}

html.sq-ui-shell *,
html.sq-ui-shell *::before,
html.sq-ui-shell *::after {
    box-sizing: border-box;
}

html.sq-ui-shell body > #outercontainer,
html.sq-ui-shell #outercontainer {
    width: 100% !important;
    max-width: none !important;
    margin-right: auto !important;
    margin-left: auto !important;
    padding-right: clamp(24px, 2.4vw, 48px) !important;
    padding-left: clamp(24px, 2.4vw, 48px) !important;
}

html.sq-ui-shell #main_row {
    width: 100%;
    margin-right: 0 !important;
    margin-left: 0 !important;
}

html.sq-ui-shell #main_row > [class*="col-"] {
    min-width: 0;
}

html.sq-ui-shell--legacy #wrapper.container-fluid,
html.sq-ui-shell--legacy #main_row > [class*="col-"] {
    padding-right: 0 !important;
    padding-left: 0 !important;
}

html.sq-ui-shell a {
    text-underline-offset: 2px;
}

html.sq-ui-shell--legacy :is(a, button, input, select, textarea, [tabindex]):not(.sq-shell-native-island *):focus-visible {
    outline: 3px solid var(--sq-shell-primary) !important;
    outline-offset: 2px !important;
}

html.sq-ui-shell--legacy body {
    line-height: 1.5;
}

html.sq-ui-shell--legacy .btnn.btn-link {
    color: var(--sq-shell-primary) !important;
}

/* Compact legacy page heading */

html.sq-ui-shell--legacy .sq-shell-page-title {
    position: relative;
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    min-height: 48px;
    margin: 12px 0 18px !important;
    padding: 8px 0 8px 16px !important;
    overflow: visible;
    border: 0 !important;
    border-left: 4px solid var(--sq-shell-primary) !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    text-align: left !important;
}

html.sq-ui-shell--legacy .sq-shell-page-title::before,
html.sq-ui-shell--legacy .sq-shell-page-title::after {
    display: none !important;
    content: none !important;
}

html.sq-ui-shell--legacy .sq-shell-page-title #pagetitle_h3,
html.sq-ui-shell--legacy .sq-shell-page-title h3,
html.sq-ui-shell--legacy .sq-shell-page-title h3 * {
    max-width: 100%;
    margin: 0 !important;
    padding: 0 !important;
    color: var(--sq-shell-ink) !important;
    font-size: clamp(22px, 2vw, 28px) !important;
    font-weight: 700 !important;
    letter-spacing: -0.015em !important;
    line-height: 1.25 !important;
    text-align: left !important;
    text-shadow: none !important;
    overflow-wrap: anywhere;
    word-break: break-word;
}

html.sq-ui-shell--legacy .sq-shell-page-title a {
    color: var(--sq-shell-primary-dark) !important;
}

/* Cards and structural containers */

html.sq-ui-shell--legacy :is(.well, .panel, .thumbnail, .jumbotron):not(.sq-shell-native-island):not(.sq-shell-native-island *) {
    border: 1px solid var(--sq-shell-line) !important;
    border-radius: var(--sq-shell-radius) !important;
    background: var(--sq-shell-surface) !important;
    box-shadow: var(--sq-shell-shadow-sm) !important;
}

html.sq-ui-shell--legacy .well:not(.sq-shell-native-island):not(.sq-shell-native-island *) {
    margin-bottom: 16px !important;
    padding: 18px !important;
    overflow: visible !important;
}

html.sq-ui-shell--legacy .well:hover:not(.sq-shell-native-island):not(.sq-shell-native-island *) {
    box-shadow: var(--sq-shell-shadow-sm) !important;
}

html.sq-ui-shell--legacy :is(.well .well, .panel .well, .well .panel):not(.sq-shell-native-island):not(.sq-shell-native-island *) {
    border-color: transparent !important;
    background: transparent !important;
    box-shadow: none !important;
}

html.sq-ui-shell--legacy .panel:not(.sq-shell-native-island):not(.sq-shell-native-island *) {
    margin-bottom: 16px;
    overflow: visible;
}

html.sq-ui-shell--legacy .panel-heading:not(.sq-shell-native-island *) {
    min-height: 46px;
    padding: 12px 16px !important;
    border: 0 !important;
    border-bottom: 1px solid var(--sq-shell-line) !important;
    border-radius: var(--sq-shell-radius) var(--sq-shell-radius) 0 0 !important;
    background: var(--sq-shell-surface-muted) !important;
    color: var(--sq-shell-ink) !important;
}

html.sq-ui-shell--legacy .panel-heading:not(.sq-shell-native-island *) :is(.panel-title, h1, h2, h3, h4, h5) {
    margin: 0;
    color: var(--sq-shell-ink) !important;
    font-weight: 700 !important;
}

html.sq-ui-shell--legacy .panel-body:not(.sq-shell-native-island *) {
    padding: 16px !important;
    overflow: visible;
    border-radius: 0 0 var(--sq-shell-radius) var(--sq-shell-radius);
    background: #fff;
}

/* Common info_section component */

html.sq-ui-shell--legacy .sq-shell-section-head {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 50px;
    margin: 0 !important;
    overflow: hidden;
    border: 1px solid var(--sq-shell-line-strong) !important;
    border-left: 3px solid var(--sq-shell-primary) !important;
    border-radius: var(--sq-shell-radius) var(--sq-shell-radius) 0 0 !important;
    background: var(--sq-shell-surface) !important;
    box-shadow: none !important;
}

html.sq-ui-shell--legacy .sq-shell-section-head:is(.infosectionhead_empty, .sub_infosectionhead_empty) {
    border-radius: var(--sq-shell-radius) !important;
}

html.sq-ui-shell--legacy .sq-shell-section-head:is(
    .infosectionhead_empty,
    .sub_infosectionhead_empty
):has(:is(.sq-shell-section-actions, .sq-shell-section-note)) {
    grid-template-columns: minmax(0, 1fr) auto auto;
}

html.sq-ui-shell--legacy .sq-shell-section-head > tbody,
html.sq-ui-shell--legacy .sq-shell-section-head > tbody > tr {
    display: contents !important;
}

html.sq-ui-shell--legacy .sq-shell-section-head :is(
    .infosectiontitle,
    .infosectiontitle_empty,
    .sub_infosectiontitle,
    .sub_infosectiontitle_empty
) {
    display: flex !important;
    width: auto !important;
    min-width: 0 !important;
    min-height: 48px;
    align-items: center;
    padding: 10px 14px !important;
    color: var(--sq-shell-ink) !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 1.35;
    text-align: left !important;
    white-space: normal !important;
}

html.sq-ui-shell--legacy .sq-shell-section-head :is(
    .infosectionsubtitle,
    .infosectionsubtitle_empty,
    .sub_infosectionsubtitle,
    .sub_infosectionsubtitle_empty,
    .infosection_emptymessage,
    .sub_infosection_emptymessage
) {
    display: flex !important;
    width: auto !important;
    max-width: min(46ch, 44vw);
    min-height: 48px;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    padding: 8px 14px !important;
    color: var(--sq-shell-muted) !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    line-height: 1.35;
    text-align: right !important;
    white-space: normal !important;
}

html.sq-ui-shell--legacy .sq-shell-section-head :is(
    .infosection_emptymessage,
    .sub_infosection_emptymessage
):empty {
    display: none !important;
}

html.sq-ui-shell--legacy .sq-shell-section-head .sq-shell-section-empty {
    display: none !important;
}

html.sq-ui-shell--legacy .sq-shell-section-head .sq-shell-section-note {
    overflow: hidden;
    text-overflow: ellipsis;
}

html.sq-ui-shell--legacy .sq-shell-section-head :is(
    .sq-shell-section-actions,
    .sq-shell-section-note,
    .sq-shell-section-empty
) {
    cursor: default !important;
}

html.sq-ui-shell--legacy .sq-shell-section-head .sq-shell-section-actions :is(
    a,
    button,
    [role="button"]
) {
    cursor: pointer;
}

html.sq-ui-shell--legacy .sq-shell-section-head .sq-shell-section-actions {
    flex-wrap: wrap;
}

html.sq-ui-shell--legacy .sq-shell-section-head :is(a:not(.btn), .collapser, .collapser a) {
    color: var(--sq-shell-primary-dark) !important;
    text-decoration: none !important;
}

html.sq-ui-shell--legacy .sq-shell-section-head :is(a:not(.btn), .collapser, .collapser a):hover {
    color: var(--sq-shell-primary) !important;
    text-decoration: underline !important;
}

/* The branded compatibility sheet uses a late `header * { color:white }`
 * rule. Section headers are now light, so every nested title node must be
 * explicitly returned to dark text. */
html.sq-ui-shell--legacy .sq-shell-section-head :is(h1, h2, h3, h4, h5, h6),
html.sq-ui-shell--legacy .sq-shell-section-head .collapser * {
    color: var(--sq-shell-ink) !important;
    text-shadow: none !important;
}

html.sq-ui-shell--legacy .sq-shell-section-head :is(font[color="red"], .text-danger) {
    color: var(--sq-shell-red) !important;
}

html.sq-ui-shell--legacy .sq-shell-section-head :is(.collapser img, img[src*="arrow"], img[src*="collapse"]) {
    display: none !important;
}

html.sq-ui-shell--legacy .sq-shell-section-head :is(.collapser, .collapser_show, .collapser_hide)::before {
    display: inline-block;
    width: 1em;
    margin-right: 7px;
    color: var(--sq-shell-primary);
    content: '\25BE';
    font-size: 12px;
    line-height: 1;
    text-decoration: none;
    transform: rotate(0deg);
    transition: transform 120ms ease;
}

html.sq-ui-shell--legacy .sq-shell-section-collapsed :is(.collapser, .collapser_show, .collapser_hide)::before {
    transform: rotate(-90deg);
}

html.sq-ui-shell--legacy .sq-shell-section-content {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 16px !important;
    overflow: visible !important;
    border: 1px solid var(--sq-shell-line) !important;
    border-top: 0 !important;
    border-radius: 0 0 var(--sq-shell-radius) var(--sq-shell-radius) !important;
    background: #fff !important;
    box-shadow: none !important;
    overflow-wrap: anywhere;
    word-break: break-word;
}

html.sq-ui-shell--legacy .sq-shell-section-wrapper {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
}

html.sq-ui-shell--legacy .sq-shell-section-wrapper:is(
    [style*="display:none" i],
    [style*="display: none" i]
) {
    display: none !important;
}

/* Page-local responsive styles occasionally force generated wrapper spans to
 * display:block!important. The main content id gives the hidden state enough
 * specificity to preserve the legacy Effects.hideElement contract. */
html.sq-ui-shell--legacy #main_row .sq-shell-section-wrapper:is(
    [style*="display:none" i],
    [style*="display: none" i]
) {
    display: none !important;
}

html.sq-ui-shell--legacy :is(
    .infosectioncontent,
    .infosectioncontent_empty,
    .sub_infosectioncontent,
    .sub_infosectioncontent_empty,
    .subsectioncontent
):not(.sq-shell-section-content):not(.sq-shell-native-island *) {
    width: 100% !important;
    max-width: 100% !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
    padding: 16px !important;
    overflow: visible !important;
    border: 1px solid var(--sq-shell-line) !important;
    border-radius: var(--sq-shell-radius) !important;
    background: #fff !important;
    box-shadow: none !important;
}

html.sq-ui-shell--legacy .well.sq-shell-section-frame:not(.sq-shell-native-island):not(.sq-shell-native-island *) {
    margin-bottom: 16px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

html.sq-ui-shell--legacy .sq-shell-section-frame > :is(.sq-shell-section-head, .sq-shell-section-content) {
    margin-right: 0 !important;
    margin-left: 0 !important;
}

html.sq-ui-shell--legacy .sq-shell-structural-panel {
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

html.sq-ui-shell--legacy .sq-shell-structural-panel > .panel-body {
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
}

html.sq-ui-shell--legacy .sq-shell-structural-panel + .sq-shell-structural-panel {
    margin-top: 12px !important;
}

/* Shared detail_page_2_col_section structure */

html.sq-ui-shell--legacy .sq-shell-detail-section {
    margin-bottom: 14px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

html.sq-ui-shell--legacy .sq-shell-detail-section > .row {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);
    gap: 12px;
    margin: 0 !important;
}

html.sq-ui-shell--legacy .sq-shell-detail-outer-row {
    width: 100% !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
}

html.sq-ui-shell--legacy .sq-shell-detail-outer-column {
    float: none !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    padding-right: 0 !important;
    padding-left: 0 !important;
}

/* Bootstrap clearfix pseudo-elements become grid items unless suppressed.
 * Without this, the icon lands in the content track and the real content is
 * forced into the 40px icon track. */
html.sq-ui-shell--legacy .sq-shell-detail-section > .row::before,
html.sq-ui-shell--legacy .sq-shell-detail-section > .row::after {
    display: none !important;
    content: none !important;
}

html.sq-ui-shell--legacy .sq-shell-detail-icon,
html.sq-ui-shell--legacy .sq-shell-detail-main {
    float: none !important;
    width: auto !important;
    min-width: 0;
    padding: 0 !important;
}

html.sq-ui-shell--legacy .sq-shell-detail-icon {
    display: flex;
    justify-content: center;
    padding-top: 10px !important;
    color: var(--sq-shell-primary-dark);
}

html.sq-ui-shell--legacy .sq-shell-detail-icon .glyphicon {
    font-size: 24px !important;
}

/* Typography and states */

html.sq-ui-shell--legacy :is(h1, h2, h3, h4, h5, h6):not(.sq-shell-native-island *) {
    color: var(--sq-shell-ink);
    line-height: 1.25;
}

html.sq-ui-shell--legacy :is(p, li, dd, dt, label, td):not(.sq-shell-native-island *) {
    overflow-wrap: break-word;
}

html.sq-ui-shell--legacy :is(.text-muted, small, .help-block):not(.sq-shell-native-island *) {
    color: var(--sq-shell-muted) !important;
}

html.sq-ui-shell--legacy :is(input, textarea):not(.sq-shell-native-island *)::placeholder {
    color: var(--sq-shell-muted) !important;
    opacity: 1 !important;
}

html.sq-ui-shell--legacy :is(button, input, select, textarea):not(.sq-shell-native-island *):disabled,
html.sq-ui-shell--legacy :is(.btn, .form-control).disabled:not(.sq-shell-native-island *),
html.sq-ui-shell--legacy [aria-disabled="true"]:not(.sq-shell-native-island *) {
    border-color: var(--sq-shell-line-strong) !important;
    background: #e9efeb !important;
    color: #52665d !important;
    cursor: not-allowed !important;
    opacity: 1 !important;
    text-shadow: none !important;
}

html.sq-ui-shell--legacy :is(.alert:empty, .panel-body:empty, .well:empty):not(.sq-shell-native-island *) {
    display: none !important;
}

html.sq-ui-shell--legacy :is(.loading, .processing, .dataTables_processing):not(.sq-shell-native-island *) {
    min-height: 48px;
    padding: 13px 16px !important;
    border: 1px dashed var(--sq-shell-line-strong) !important;
    border-radius: var(--sq-shell-radius-sm) !important;
    background: var(--sq-shell-surface-muted) !important;
    color: var(--sq-shell-muted) !important;
}

/* Forms */

html.sq-ui-shell--legacy :is(
    .form-control,
    input[type="text"],
    input[type="password"],
    input[type="email"],
    input[type="number"],
    input[type="date"],
    input[type="search"],
    textarea,
    select
):not(.sq-shell-native-island *) {
    min-height: 42px;
    max-width: 100%;
    border: 1px solid var(--sq-shell-line-strong) !important;
    border-radius: var(--sq-shell-radius-sm) !important;
    background-color: #fff !important;
    color: var(--sq-shell-ink) !important;
    box-shadow: none !important;
}

html.sq-ui-shell--legacy textarea.form-control:not(.sq-shell-native-island *),
html.sq-ui-shell--legacy textarea:not(.sq-shell-native-island *) {
    min-height: 96px;
    resize: vertical;
}

html.sq-ui-shell--legacy :is(.form-control, input, textarea, select):not(.sq-shell-native-island *):focus {
    border-color: var(--sq-shell-primary) !important;
    box-shadow: var(--sq-shell-focus) !important;
}

html.sq-ui-shell--legacy :is(.form-group > label, label.control-label):not(.sq-shell-native-island *) {
    margin-bottom: 6px;
    color: var(--sq-shell-ink) !important;
    font-weight: 650 !important;
}

html.sq-ui-shell--legacy :is(.select2-container, .chosen-container):not(.sq-shell-native-island *) {
    max-width: 100% !important;
}

html.sq-ui-shell--legacy :is(.select2-choice, .select2-selection, .chosen-single, .chosen-choices):not(.sq-shell-native-island *) {
    min-height: 42px !important;
    border: 1px solid var(--sq-shell-line-strong) !important;
    border-radius: var(--sq-shell-radius-sm) !important;
    background: #fff !important;
    color: var(--sq-shell-ink) !important;
    box-shadow: none !important;
}

html.sq-ui-shell--legacy :is(.select2-drop, .select2-dropdown, .chosen-drop, .ui-autocomplete):not(.sq-shell-native-island *) {
    border: 1px solid var(--sq-shell-line) !important;
    border-radius: var(--sq-shell-radius-sm) !important;
    background: #fff !important;
    box-shadow: 0 10px 28px rgba(23, 56, 44, 0.14) !important;
}

/* Buttons and toolbars */

html.sq-ui-shell--legacy .btn:not(.sq-shell-native-island *) {
    min-height: 42px;
    padding: 9px 14px !important;
    border: 1px solid transparent !important;
    border-radius: var(--sq-shell-radius-sm) !important;
    font-weight: 650 !important;
    line-height: 1.3;
    text-shadow: none !important;
    box-shadow: none !important;
}

html.sq-ui-shell--legacy .btn-primary:not(.sq-shell-native-island *) {
    border-color: var(--sq-shell-primary) !important;
    background: var(--sq-shell-primary) !important;
    color: #fff !important;
}

html.sq-ui-shell--legacy .btn-primary:not(.sq-shell-native-island *):is(:hover, :focus, :active) {
    border-color: var(--sq-shell-primary-dark) !important;
    background: var(--sq-shell-primary-dark) !important;
    color: #fff !important;
}

html.sq-ui-shell--legacy .btn-default:not(.sq-shell-native-island *) {
    border-color: var(--sq-shell-line-strong) !important;
    background: #fff !important;
    color: var(--sq-shell-ink) !important;
}

html.sq-ui-shell--legacy .btn-default:not(.sq-shell-native-island *):is(:hover, :focus, :active) {
    border-color: #91b5a2 !important;
    background: var(--sq-shell-primary-soft) !important;
    color: var(--sq-shell-primary-dark) !important;
}

html.sq-ui-shell--legacy .btn-success:not(.sq-shell-native-island *) {
    border-color: #176a49 !important;
    background: #176a49 !important;
    color: #fff !important;
}

html.sq-ui-shell--legacy .btn-info:not(.sq-shell-native-island *) {
    border-color: #0e7187 !important;
    background: #0e7187 !important;
    color: #fff !important;
}

html.sq-ui-shell--legacy .btn-warning:not(.sq-shell-native-island *) {
    border-color: var(--sq-shell-amber) !important;
    background: var(--sq-shell-amber) !important;
    color: #fff !important;
}

html.sq-ui-shell--legacy .btn-danger:not(.sq-shell-native-island *) {
    border-color: var(--sq-shell-red) !important;
    background: var(--sq-shell-red) !important;
    color: #fff !important;
}

html.sq-ui-shell--legacy :is(.btn-sm, .btn-xs):not(.sq-shell-native-island *) {
    min-height: 38px;
    padding: 7px 11px !important;
}

html.sq-ui-shell--legacy :is(.btn-toolbar, .form-actions, .sq-shell-section-actions):not(.sq-shell-native-island *) {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

html.sq-ui-shell--legacy :is(.btn-toolbar, .form-actions, .modal-footer):not(.sq-shell-native-island *) > .btn,
html.sq-ui-shell--legacy :is(.panel-body, .modal-footer, .form-actions):not(.sq-shell-native-island *) > .btn + .btn {
    margin: 0 !important;
}

/* Tables and DataTables */

html.sq-ui-shell--legacy .sq-shell-table-region:not(.sq-shell-native-island *) {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    overflow-y: visible;
    border: 1px solid var(--sq-shell-line);
    border-radius: var(--sq-shell-radius-sm);
    background: #fff;
    scrollbar-color: #94ad9f #edf2ef;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
}

html.sq-ui-shell--legacy :is(.dataTables_wrapper, .dataTables_scroll):not(.sq-shell-native-island *) {
    width: 100% !important;
    max-width: 100% !important;
}

html.sq-ui-shell--legacy .dataTables_wrapper.sq-shell-table-region:not(.sq-shell-native-island *) {
    overflow: visible !important;
    border: 0;
    background: transparent;
}

html.sq-ui-shell--legacy .sq-shell-table-viewport:not(.sq-shell-native-island *) {
    margin: 8px 0;
}

html.sq-ui-shell--legacy :is(.table, .dataTable, .hs-table):not(.sq-shell-native-island *) {
    width: 100% !important;
    max-width: none !important;
    margin-bottom: 0 !important;
    border: 0 !important;
    border-collapse: separate !important;
    border-spacing: 0;
    border-radius: 0 !important;
    background: #fff;
    box-shadow: none !important;
}

html.sq-ui-shell--legacy .sq-shell-wide-table:not(.sq-shell-native-island *) {
    min-width: 760px;
}

html.sq-ui-shell--legacy :is(.table, .dataTable, .hs-table):not(.sq-shell-native-island *) > thead > tr > th {
    padding: 10px 12px !important;
    border: 0 !important;
    border-bottom: 1px solid var(--sq-shell-line-strong) !important;
    background: var(--sq-shell-surface-strong) !important;
    color: var(--sq-shell-primary-dark) !important;
    font-size: 11px !important;
    font-weight: 750 !important;
    letter-spacing: 0.035em;
    line-height: 1.35;
    text-transform: uppercase;
    white-space: normal;
}

html.sq-ui-shell--legacy :is(.table, .dataTable, .hs-table):not(.sq-shell-native-island *) > tbody > tr > td {
    padding: 9px 12px !important;
    border: 0 !important;
    border-top: 1px solid #e8efeb !important;
    background: #fff;
    color: var(--sq-shell-text);
    vertical-align: middle !important;
}

html.sq-ui-shell--legacy :is(.table, .dataTable, .hs-table):not(.sq-shell-native-island *) > tbody > tr:nth-child(even) > td {
    background: #fbfcfb;
}

html.sq-ui-shell--legacy :is(.table, .dataTable, .hs-table):not(.sq-shell-native-island *) > tbody > tr:hover > td {
    background: #f0f6f2 !important;
}

html.sq-ui-shell--legacy .dataTables_wrapper:not(.sq-shell-native-island *) {
    display: flow-root;
    padding: 0;
    color: var(--sq-shell-text);
}

/* Bootstrap-flavoured DataTables also carry `.form-inline`. Responsive form
 * rules must not turn the whole table wrapper into a shrink-to-fit flexbox. */
html.sq-ui-shell--legacy .dataTables_wrapper.form-inline:not(.sq-shell-native-island *) {
    display: flow-root !important;
}

html.sq-ui-shell--legacy .dataTables_wrapper:not(.sq-shell-native-island *) :is(.dataTables_length, .dataTables_filter) {
    margin: 0 0 10px;
    color: var(--sq-shell-muted) !important;
}

html.sq-ui-shell--legacy .dataTables_wrapper:not(.sq-shell-native-island *) :is(.dataTables_info, .dataTables_paginate) {
    margin: 10px 0 0;
    color: var(--sq-shell-muted) !important;
}

html.sq-ui-shell--legacy .dataTables_wrapper:not(.sq-shell-native-island *) :is(.dataTables_filter input, .dataTables_length select) {
    min-height: 38px;
    border: 1px solid var(--sq-shell-line-strong) !important;
    border-radius: var(--sq-shell-radius-sm) !important;
    background: #fff !important;
    color: var(--sq-shell-ink) !important;
}

html.sq-ui-shell--legacy .dataTables_wrapper:not(.sq-shell-native-island *) .dataTables_paginate .paginate_button,
html.sq-ui-shell--legacy .pagination:not(.sq-shell-native-island *) > li > :is(a, span) {
    min-width: 38px;
    min-height: 38px;
    margin: 0 2px;
    padding: 8px 10px !important;
    border: 1px solid var(--sq-shell-line) !important;
    border-radius: var(--sq-shell-radius-sm) !important;
    background: #fff !important;
    color: var(--sq-shell-text) !important;
}

html.sq-ui-shell--legacy .dataTables_wrapper:not(.sq-shell-native-island *) .dataTables_paginate .paginate_button.current,
html.sq-ui-shell--legacy .pagination:not(.sq-shell-native-island *) > .active > :is(a, span) {
    border-color: var(--sq-shell-primary) !important;
    background: var(--sq-shell-primary) !important;
    color: #fff !important;
}

html.sq-ui-shell--legacy #stock_additional_info_section_content :is(a, code, pre),
html.sq-ui-shell--legacy #stockprops_content {
    max-width: 100%;
    overflow-wrap: anywhere !important;
    word-break: break-word;
}

html.sq-ui-shell--legacy #stock_additional_info_section_content :is(ul, ol) {
    max-width: 100%;
    padding-left: 20px;
}

html.sq-ui-shell--legacy #dataset_select:not(select) {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
}

html.sq-ui-shell--legacy #dataset_select:not(select) table {
    min-width: 560px !important;
}

html.sq-ui-shell--legacy .sq-shell-section-content :is(table, thead, tbody, tr, th, td) {
    overflow-wrap: normal;
    word-break: normal;
}

/* Tabs, pills, alerts, and progress */

html.sq-ui-shell--legacy :is(.nav-tabs, .nav-pills):not(.sq-shell-native-island *) {
    display: flex;
    gap: 4px;
    max-width: 100%;
    margin-bottom: 16px;
    overflow-x: auto;
    border-bottom: 1px solid var(--sq-shell-line) !important;
    white-space: nowrap;
    scrollbar-width: thin;
}

html.sq-ui-shell--legacy :is(.nav-tabs, .nav-pills):not(.sq-shell-native-island *) > li {
    float: none;
    flex: 0 0 auto;
    margin: 0;
}

html.sq-ui-shell--legacy :is(.nav-tabs, .nav-pills):not(.sq-shell-native-island *) > li > a {
    min-height: 42px;
    margin: 0;
    padding: 10px 13px !important;
    border: 0 !important;
    border-bottom: 3px solid transparent !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: var(--sq-shell-muted) !important;
    font-weight: 650;
}

html.sq-ui-shell--legacy :is(.nav-tabs, .nav-pills):not(.sq-shell-native-island *) > li.active > a,
html.sq-ui-shell--legacy :is(.nav-tabs, .nav-pills):not(.sq-shell-native-island *) > li > a:hover {
    border-bottom-color: var(--sq-shell-primary) !important;
    background: var(--sq-shell-primary-soft) !important;
    color: var(--sq-shell-primary-dark) !important;
}

html.sq-ui-shell--legacy .alert:not(.sq-shell-native-island *) {
    padding: 12px 15px !important;
    border: 1px solid !important;
    border-radius: var(--sq-shell-radius-sm) !important;
    box-shadow: none !important;
}

html.sq-ui-shell--legacy .alert-success:not(.sq-shell-native-island *) {
    border-color: #b9d6c5 !important;
    background: var(--sq-shell-primary-soft) !important;
    color: var(--sq-shell-primary-dark) !important;
}

html.sq-ui-shell--legacy .alert-info:not(.sq-shell-native-island *) {
    border-color: #bfdbfe !important;
    background: var(--sq-shell-blue-soft) !important;
    color: #1e40af !important;
}

html.sq-ui-shell--legacy .alert-warning:not(.sq-shell-native-island *) {
    border-color: #ead7ac !important;
    background: var(--sq-shell-amber-soft) !important;
    color: #71470d !important;
}

html.sq-ui-shell--legacy .alert-danger:not(.sq-shell-native-island *) {
    border-color: #e7b8b5 !important;
    background: var(--sq-shell-red-soft) !important;
    color: #842f2b !important;
}

html.sq-ui-shell--legacy :is(.badge, .label):not(.sq-shell-native-island *) {
    border-radius: 999px !important;
    font-weight: 700;
}

html.sq-ui-shell--legacy .progress:not(.sq-shell-native-island *) {
    height: 8px;
    overflow: hidden;
    border-radius: 999px;
    background: #e4ece7;
    box-shadow: none;
}

/* Dropdowns */

html.sq-ui-shell--legacy :is(.dropdown-menu, .ui-autocomplete):not(.sq-shell-native-island *) {
    max-width: min(420px, calc(100vw - 32px));
    padding: 6px !important;
    overflow-wrap: break-word;
    border: 1px solid var(--sq-shell-line) !important;
    border-radius: var(--sq-shell-radius) !important;
    background: #fff !important;
    box-shadow: 0 12px 30px rgba(23, 56, 44, 0.14) !important;
}

html.sq-ui-shell--legacy .dropdown-menu:not(.sq-shell-native-island *) > li > a {
    min-height: 40px;
    padding: 10px 12px !important;
    border-radius: var(--sq-shell-radius-sm);
    color: var(--sq-shell-text) !important;
    white-space: normal;
}

html.sq-ui-shell--legacy .dropdown-menu:not(.sq-shell-native-island *) > li > a:is(:hover, :focus) {
    background: var(--sq-shell-primary-soft) !important;
    color: var(--sq-shell-primary-dark) !important;
}

/* Bootstrap and jQuery UI dialogs */

html.sq-ui-shell--legacy .modal-backdrop.in {
    background: #10291f;
    opacity: 0.52;
}

html.sq-ui-shell--legacy .modal-dialog:not(.sq-shell-native-island *) {
    width: min(760px, calc(100vw - 32px)) !important;
    max-width: calc(100vw - 32px);
    margin: 24px auto !important;
}

html.sq-ui-shell--legacy .modal-lg:not(.sq-shell-native-island *) {
    width: min(1120px, calc(100vw - 32px)) !important;
}

html.sq-ui-shell--legacy .modal-xl:not(.sq-shell-native-island *) {
    width: min(1440px, calc(100vw - 32px)) !important;
}

html.sq-ui-shell--legacy :is(.modal-content, .ui-dialog):not(.sq-shell-native-island, .sq-shell-native-island *) {
    max-width: calc(100vw - 24px) !important;
    max-height: calc(100vh - 24px);
    max-height: calc(100dvh - 24px);
    overflow: hidden;
    border: 1px solid var(--sq-shell-line) !important;
    border-radius: var(--sq-shell-radius-lg) !important;
    background: #fff !important;
    box-shadow: var(--sq-shell-shadow-dialog) !important;
}

html.sq-ui-shell--legacy :is(.modal-header, .ui-dialog-titlebar):not(.sq-shell-native-island *) {
    min-height: 52px;
    padding: 14px 18px !important;
    border: 0 !important;
    border-bottom: 1px solid var(--sq-shell-line) !important;
    background: var(--sq-shell-surface-muted) !important;
    color: var(--sq-shell-ink) !important;
}

html.sq-ui-shell--legacy :is(.modal-title, .ui-dialog-title):not(.sq-shell-native-island *) {
    color: var(--sq-shell-ink) !important;
    font-size: 17px !important;
    font-weight: 700 !important;
}

html.sq-ui-shell--legacy :is(.modal-header .close, .ui-dialog-titlebar-close):not(.sq-shell-native-island *) {
    min-width: 38px;
    min-height: 38px;
    color: var(--sq-shell-ink) !important;
    opacity: 0.78 !important;
}

html.sq-ui-shell--legacy :is(.modal-body, .ui-dialog-content):not(.sq-shell-native-island *) {
    max-width: 100%;
    max-height: calc(100vh - 180px);
    max-height: calc(100dvh - 180px);
    padding: 18px !important;
    overflow: auto !important;
    background: #fff !important;
    color: var(--sq-shell-text) !important;
    overscroll-behavior: contain;
}

html.sq-ui-shell--legacy :is(.modal-footer, .ui-dialog-buttonpane):not(.sq-shell-native-island *) {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
    min-height: 58px;
    margin: 0 !important;
    padding: 10px 16px !important;
    border: 0 !important;
    border-top: 1px solid var(--sq-shell-line) !important;
    background: var(--sq-shell-surface-muted) !important;
}

/* Responsive legacy layout */

@media (max-width: 991px) {
    html.sq-ui-shell--legacy body > #outercontainer,
    html.sq-ui-shell--legacy #outercontainer {
        padding-right: 20px !important;
        padding-left: 20px !important;
    }

    html.sq-ui-shell--legacy :is(.form-inline, .btn-toolbar):not(.sq-shell-native-island *) {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        align-items: flex-end;
    }

    html.sq-ui-shell--legacy .form-inline:not(.sq-shell-native-island *) .form-group {
        min-width: min(240px, 100%);
        margin: 0 !important;
    }

    html.sq-ui-shell--legacy .form-inline:not(.sq-shell-native-island *) .form-control {
        width: 100%;
    }
}

@media (max-width: 768px) {
    html.sq-ui-shell--legacy body > #outercontainer,
    html.sq-ui-shell--legacy #outercontainer {
        padding-right: 16px !important;
        padding-left: 16px !important;
    }

    html.sq-ui-shell--legacy .sq-shell-page-title {
        min-height: 42px;
        margin: 8px 0 14px !important;
        padding: 7px 0 7px 12px !important;
    }

    html.sq-ui-shell--legacy .sq-shell-page-title #pagetitle_h3,
    html.sq-ui-shell--legacy .sq-shell-page-title h3,
    html.sq-ui-shell--legacy .sq-shell-page-title h3 * {
        font-size: 21px !important;
    }

    html.sq-ui-shell--legacy .well:not(.sq-shell-native-island):not(.sq-shell-native-island *),
    html.sq-ui-shell--legacy .panel-body:not(.sq-shell-native-island *),
    html.sq-ui-shell--legacy .sq-shell-section-content {
        padding: 14px !important;
    }

    html.sq-ui-shell--legacy .sq-shell-structural-panel > .panel-body {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        padding: 0 !important;
    }

    html.sq-ui-shell--legacy .well.sq-shell-section-frame:not(.sq-shell-native-island):not(.sq-shell-native-island *) {
        padding: 0 !important;
    }

    html.sq-ui-shell--legacy #dm-topbar .col-sm-6 {
        display: flex !important;
        flex-direction: column;
        align-items: stretch !important;
        gap: 8px;
        width: 100% !important;
        max-width: 100% !important;
        text-align: left !important;
    }

    html.sq-ui-shell--legacy :is(#dm_list_sel, #dm_clear_filters) {
        width: 100% !important;
        max-width: 100%;
        min-width: 0 !important;
    }

    html.sq-ui-shell--legacy .sq-shell-section-head {
        grid-template-columns: minmax(0, 1fr) auto;
        min-height: 50px;
    }

    html.sq-ui-shell--legacy .sq-shell-section-head :is(
        .infosectiontitle,
        .infosectiontitle_empty,
        .sub_infosectiontitle,
        .sub_infosectiontitle_empty
    ) {
        min-height: 48px;
        padding: 10px 12px !important;
    }

    html.sq-ui-shell--legacy .sq-shell-section-head :is(
        .infosectionsubtitle,
        .infosectionsubtitle_empty,
        .sub_infosectionsubtitle,
        .sub_infosectionsubtitle_empty,
        .infosection_emptymessage,
        .sub_infosection_emptymessage
    ) {
        display: flex !important;
        max-width: 28ch;
        min-height: 48px;
        padding: 7px 10px !important;
    }

    html.sq-ui-shell--legacy .sq-shell-detail-section > .row {
        width: 100% !important;
        grid-template-columns: minmax(0, 1fr);
        gap: 0;
    }

    html.sq-ui-shell--legacy .sq-shell-detail-main {
        grid-column: 1 / -1;
        justify-self: stretch;
        width: 100% !important;
        max-width: 100% !important;
    }

    html.sq-ui-shell--legacy .sq-shell-detail-main :is(
        .sq-shell-section-frame,
        .sq-shell-section-head,
        .sq-shell-section-content,
        .sq-shell-section-wrapper,
        .sq-shell-structural-panel,
        .panel-body,
        .dataTables_wrapper,
        .table-responsive
    ) {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    html.sq-ui-shell--legacy .sq-shell-detail-icon {
        display: none !important;
    }

    html.sq-ui-shell--legacy #main_row .row:not(.sq-shell-native-island *) {
        width: 100% !important;
        max-width: 100% !important;
        margin-right: 0 !important;
        margin-left: 0 !important;
    }

    html.sq-ui-shell--legacy #main_row .form-horizontal .form-group:not(.sq-shell-native-island *) {
        width: 100% !important;
        max-width: 100% !important;
        margin-right: 0 !important;
        margin-left: 0 !important;
    }

    html.sq-ui-shell--legacy form > div:has(> div > #start-date):has(> div > #end-date) {
        flex-wrap: wrap !important;
        align-items: stretch !important;
        gap: 12px !important;
    }

    html.sq-ui-shell--legacy form > div:has(> div > #start-date):has(> div > #end-date) > div {
        width: 100%;
        min-width: 0;
        flex: 1 1 180px;
    }

    html.sq-ui-shell--legacy :is(#start-date, #end-date) {
        width: 100% !important;
        max-width: 100% !important;
    }

    html.sq-ui-shell--legacy .sq-shell-fieldbook-setup,
    html.sq-ui-shell--legacy .sq-shell-fieldbook-setup > tbody,
    html.sq-ui-shell--legacy .sq-shell-fieldbook-setup > tbody > tr,
    html.sq-ui-shell--legacy .sq-shell-fieldbook-setup > tbody > tr > td {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    html.sq-ui-shell--legacy .sq-shell-fieldbook-setup > tbody > tr > td:nth-child(2) {
        display: none !important;
    }

    html.sq-ui-shell--legacy #configure_fieldbook_qrcode_div img {
        width: auto;
        max-width: 100%;
        height: auto;
    }

    html.sq-ui-shell--legacy :is(.row, .form-horizontal .form-group):not(.sq-shell-native-island *) > [class*="col-"] {
        min-width: 0;
        max-width: 100%;
    }

    html.sq-ui-shell--legacy .dataTables_wrapper:not(.sq-shell-native-island *) :is(.dataTables_length, .dataTables_filter, .dataTables_info, .dataTables_paginate) {
        float: none !important;
        width: 100% !important;
        text-align: left !important;
    }

    html.sq-ui-shell--legacy .dataTables_wrapper:not(.sq-shell-native-island *) .dataTables_filter input {
        display: block;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        margin: 5px 0 0 !important;
    }

    html.sq-ui-shell--legacy .sq-shell-trial-tree,
    html.sq-ui-shell--legacy .sq-shell-trial-tree > :is(thead, tbody),
    html.sq-ui-shell--legacy .sq-shell-trial-tree > :is(thead, tbody) > tr,
    html.sq-ui-shell--legacy .sq-shell-trial-tree > :is(thead, tbody) > tr > :is(th, td) {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    html.sq-ui-shell--legacy .sq-shell-trial-tree {
        min-width: 0;
        overflow: visible !important;
    }

    html.sq-ui-shell--legacy .sq-shell-trial-tree > thead > tr > th {
        min-height: 44px;
        white-space: normal !important;
    }

    html.sq-ui-shell--legacy .sq-shell-trial-tree > thead > tr > th + th {
        display: none !important;
    }

    html.sq-ui-shell--legacy .sq-shell-trial-tree > tbody > tr > td + td {
        min-height: 160px;
        border-top: 1px solid var(--sq-shell-line) !important;
    }

    html.sq-ui-shell--legacy :is(.modal-dialog, .modal-lg, .modal-xl):not(.sq-shell-native-island *) {
        width: calc(100vw - 24px) !important;
        max-width: calc(100vw - 24px) !important;
        height: calc(100vh - 24px);
        height: calc(100dvh - 24px);
        margin: 12px auto !important;
    }

    html.sq-ui-shell--legacy .modal.in:not(.sq-shell-native-island *) .modal-content {
        display: flex;
        max-height: 100%;
        flex-direction: column;
    }

    html.sq-ui-shell--legacy .modal.in:not(.sq-shell-native-island *) .modal-content > form {
        display: flex;
        min-height: 0;
        max-height: 100%;
        flex: 1 1 auto;
        flex-direction: column;
    }

    html.sq-ui-shell--legacy .modal.in:not(.sq-shell-native-island *) :is(.modal-header, .modal-footer) {
        flex: 0 0 auto;
    }

    html.sq-ui-shell--legacy :is(.modal-body, .ui-dialog-content):not(.sq-shell-native-island *) {
        min-height: 0;
        max-height: none;
        flex: 1 1 auto;
    }

    html.sq-ui-shell--legacy :is(.btn, .form-control, input, select, textarea):not(.sq-shell-native-island *) {
        min-height: 44px;
    }
}

@media (max-width: 479px) {
    html.sq-ui-shell--legacy body > #outercontainer,
    html.sq-ui-shell--legacy #outercontainer {
        padding-right: 12px !important;
        padding-left: 12px !important;
    }

    html.sq-ui-shell--legacy .sq-shell-section-head:has(:is(
        .sq-shell-section-actions,
        .sq-shell-section-note
    )) {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    html.sq-ui-shell--legacy .sq-shell-section-head :is(
        .sq-shell-section-actions,
        .sq-shell-section-note
    ) {
        max-width: none;
        min-height: 44px;
        justify-content: flex-start;
        padding: 6px 12px 10px !important;
        border-top: 1px solid var(--sq-shell-line);
        text-align: left !important;
    }

    html.sq-ui-shell--legacy .sq-shell-section-head .sq-shell-section-actions .btn {
        width: auto !important;
        max-width: 100%;
    }

    html.sq-ui-shell--legacy :is(.form-inline, .btn-toolbar):not(.sq-shell-native-island *) {
        align-items: stretch;
        flex-direction: column;
    }

    html.sq-ui-shell--legacy :is(.form-inline, .btn-toolbar):not(.sq-shell-native-island *) > :is(.btn, .btn-group, .form-group) {
        width: 100% !important;
        margin: 0 !important;
    }

    html.sq-ui-shell--legacy .modal-footer:not(.sq-shell-native-island *) {
        align-items: stretch;
        flex-direction: column;
    }

    html.sq-ui-shell--legacy .modal-footer:not(.sq-shell-native-island *) .btn {
        width: 100% !important;
        margin: 0 !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    html.sq-ui-shell *,
    html.sq-ui-shell *::before,
    html.sq-ui-shell *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}