/*
 * KMSI Vendor Portal — app-level styles.
 * Loaded AFTER the Metronic bundle in every layout (_Layout via _Styles, _AuthLayout). Never edit the theme files;
 * override here, on base selectors, so every current and future input follows the same rules.
 */

/* ---- Input tokens ---- */
:root {
    --kmsi-input-border-width: 1px;
    --kmsi-input-border: #d5d5d5;          /* normal: dark grey */
    --kmsi-input-border-hover: #b8b8b8;    /* hover: slightly darker than normal, not black */
    --kmsi-input-border-focus: #6d6d6d;    /* focus / active: black */
    --kmsi-input-border-disabled: #c9ccd1; /* disabled / readonly: muted */
}

[data-bs-theme=dark] {
    --kmsi-input-border: #8a8f98;
    --kmsi-input-border-hover: #b4b8bf;
    --kmsi-input-border-focus: #ffffff;
    --kmsi-input-border-disabled: #3a3d45;
}

/* ---- Text-like inputs, textarea, select ----
 * :not(.is-invalid/.is-valid) keeps the theme's validation colours intact.
 * :not(.form-select-solid) leaves Metronic's own "solid" select variant (borderless, filled
 * background) alone — this custom bordered look is for the plain/outline inputs only.
 * Border width is fixed in every state; only the colour changes (no glow ring, so width never looks different). */
.form-control:not(.is-invalid):not(.is-valid),
.form-select:not(.is-invalid):not(.is-valid):not(.form-select-solid) {
    border-width: var(--kmsi-input-border-width);
    border-style: solid;
    border-color: var(--kmsi-input-border);
    box-shadow: none;
    transition: border-color .15s ease;
}

.form-control:not(.is-invalid):not(.is-valid):not(:disabled):not([readonly]):hover,
.form-select:not(.is-invalid):not(.is-valid):not(.form-select-solid):not(:disabled):hover {
    border-color: var(--kmsi-input-border-hover);
}

/* Declared after :hover so a hovered + focused input shows the focus colour. */
.form-control:not(.is-invalid):not(.is-valid):not(:disabled):not([readonly]):focus,
.form-control:not(.is-invalid):not(.is-valid):not(:disabled):not([readonly]):active,
.form-select:not(.is-invalid):not(.is-valid):not(.form-select-solid):not(:disabled):focus,
.form-select:not(.is-invalid):not(.is-valid):not(.form-select-solid):not(:disabled):active {
    border-color: var(--kmsi-input-border-focus);
    box-shadow: none;
    outline: 0;
}

.form-control:not(.is-invalid):not(.is-valid):disabled,
.form-control:not(.is-invalid):not(.is-valid)[readonly],
.form-select:not(.is-invalid):not(.is-valid):not(.form-select-solid):disabled {
    border-color: var(--kmsi-input-border-disabled);
}

/* ---- Select2 (_Select2.cshtml): same border look as the inputs above, on the visible selection
 * box only. Deliberately does not touch .select2-dropdown/.select2-results (the options popup) —
 * that stays Metronic's own default appearance. */
.select2-container .select2-selection {
    border-width: var(--kmsi-input-border-width);
    border-style: solid;
    border-color: var(--kmsi-input-border);
    box-shadow: none;
    transition: border-color .15s ease;
}

.select2-container:not(.select2-container--disabled):hover .select2-selection {
    border-color: var(--kmsi-input-border-hover);
}

.select2-container--focus .select2-selection,
.select2-container--open .select2-selection {
    border-color: var(--kmsi-input-border-focus);
    box-shadow: none;
    outline: 0;
}

.select2-container--disabled .select2-selection {
    border-color: var(--kmsi-input-border-disabled);
}

/* Theme bug (Metronic's own bootstrap5 select2 theme, plugins.bundle.css): the "solid" variant
 * resets .select2-selection__rendered's padding-right to 0, but the clear (x) button sits at
 * right:3rem, sized .7rem, and the dropdown arrow sits further right still. */
.select2-selection__rendered {
    padding-right: 0.75rem !important;
}

/* ---- Radio buttons / checkboxes (Vendor Criteria and any future survey-style form) ----
 * No radio/checkbox appeared on Login or Project History (the two pages this app's input convention
 * was drawn from), so this is a new style built to match them: same border-colour tokens as the text
 * inputs above (--kmsi-input-border/-hover/-focus/-disabled), just applied to Bootstrap's native
 * .form-check-input circle/box instead of a bordered rectangle. FormControlClassTagHelper
 * deliberately skips radio/checkbox/hidden/submit/etc., so these rules target Bootstrap's own
 * .form-check-input class directly (added by hand in the views that need it), not .form-control. */
.form-check-input {
    width: 1.5rem;
    height: 1.5rem;
    border-width: var(--kmsi-input-border-width);
    border-color: var(--kmsi-input-border);
    box-shadow: none;
    transition: border-color .15s ease, background-color .15s ease;
}

/* Match Bootstrap's .fs-5 (1.15rem) so every radio/checkbox label reads at a consistent size app-wide. */
.form-check-label {
    font-size: 1.15rem;
}

.form-check-input:not(:disabled):hover {
    border-color: var(--kmsi-input-border-hover);
}

.form-check-input:not(:disabled):focus {
    border-color: var(--kmsi-input-border-focus);
    box-shadow: none;
    outline: 0;
}

.form-check-input:disabled {
    border-color: var(--kmsi-input-border-disabled);
}

/* Bootstrap's own :checked already fills with --bs-primary; left as-is so a selected answer still
 * reads clearly as "selected" against the plain-border unselected state above. */

/* ---- Vendor Criteria survey layout (docs/figma-specs/vendor-criteria-spec.md) ----
 * One accordion item per Criteria; the open header is light blue and the body grey. Each sub-question
 * ("1.1") is a block inside the body with its radios stacked one per line. */
.criteria-card {
    border-radius: 11px;
    box-shadow: 0 10px 20px rgba(76, 87, 125, .06);
}

.criteria-badge {
    font-size: 1rem;
    font-weight: 600;
    padding: 8px 15px;
    border-radius: 4px;
}

.criteria-accordion {
    --bs-accordion-border-color: #D8D8E5;
    --bs-accordion-border-radius: 8px;
    --bs-accordion-inner-border-radius: 7px;
    --bs-accordion-btn-padding-y: 18px;
    --bs-accordion-btn-padding-x: 20px;
    --bs-accordion-active-bg: #ECF8FF;
    --bs-accordion-active-color: var(--bs-gray-900);
    --bs-accordion-btn-focus-box-shadow: none;
}

.criteria-accordion .accordion-button {
    display: flex;
    align-items: center;
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--bs-gray-900);
}

.menu-revision-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    margin-left: 6px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.35);
    color: #FFFFFF;
    font-size: 10px;
    font-weight: 600;
    line-height: 12px;
}

.criteria-header-label {
    display: inline-flex;
    align-items: center;
}

.criteria-revision-star {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 7px;
    height: 13px;
    margin-left: 5px;
    color: #F1416C;
    font-size: 16px;
    font-weight: 700;
    line-height: 13px;
}

.criteria-accordion .accordion-body {
    display: flex;
    flex-direction: column;
    gap: 20px;
    background-color: #F8F8F8;
    border-top: 1px solid #D8D8E5;
    padding: 15px 30px;
}

/* A section with an unanswered question after a failed submit (set by vendor-criteria.js). */
.criteria-accordion .accordion-item.criteria-invalid .accordion-button {
    color: var(--bs-danger);
}

.criteria-subquestion .form-label {
    color: #071437;
}

.criteria-options {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-top: 0.75rem;
}

.criteria-subquestion-title {
    font-size: 1.15rem; /* same as the accordion title */
}

.criteria-question {
    margin-bottom: 0;
    font-size: 1.15rem; /* same as the accordion title */
    font-weight: 600;
    color: #5E6278 !important;
}

.criteria-options .form-check-label {
    font-size: 1.15rem; /* same as the accordion title */
    font-weight: 600;
    color: #5E6278 !important;
}

.criteria-additional-row {
    display: flex;
    align-items: flex-start;
    gap: 2rem;
}

.criteria-family-relation-field {
    flex: 0 0 34%;
}

.criteria-relationship-field {
    flex: 0 0 306px;
    width: 306px;
    min-width: 306px;
}

.criteria-additional-row .criteria-options {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 1.5rem;
}

@media (max-width: 767.98px) {
    .criteria-additional-row {
        flex-direction: column;
        gap: 1.25rem;
    }

    .criteria-family-relation-field,
    .criteria-relationship-field {
        flex-basis: auto;
        width: 100%;
        max-width: none;
        min-width: 0;
    }
}

.criteria-project-label {
    margin-top: 1.25rem;
    font-size: .92rem;
    font-weight: 600;
    color: #071437;
}

.criteria-project-selector {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.criteria-form-fields {
    min-width: 0;
    padding: 0;
    border: 0;
}
.criteria-form-fields:disabled { opacity: .6; }

.criteria-project-dropdown { position: relative; width: 300px; max-width: 100%; }
.criteria-project-label-title {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    width: 93px;
    height: 15px;
    margin-bottom: 7px;
    color: #181C32;
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 500;
    line-height: 15px;
}
.criteria-project-label-title span {
    color: #F1416C;
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    font-weight: 500;
    line-height: 21px;
}
.criteria-project-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 300px;
    max-width: 100%;
    height: 44px;
    padding: 10px 15px;
    color: #181C32;
    background: #F9F9F9;
    border: 0;
    border-radius: 8px;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 500;
    line-height: 21px;
    text-align: left;
}
.criteria-project-trigger i { color: #7E8299; font-size: 12px; }
.criteria-project-options {
    position: absolute;
    z-index: 10;
    top: 65px;
    display: none;
    flex-direction: column;
    gap: 10px;
    width: 306px;
    max-width: 100%;
    padding: 15px 20px;
    background: #FFFFFF;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
    border-radius: 0 0 10px 10px;
}
.criteria-project-dropdown.is-open .criteria-project-options { display: flex; }
.criteria-project-list-label {
    width: 100%;
    padding: 5px 0;
    color: #181C32;
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 500;
    line-height: 12px;
}
.criteria-project-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: 22px;
    padding: 5px 0;
    color: #181C32;
    background: transparent;
    border: 0;
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 500;
    text-align: left;
}
.criteria-project-option-dot {
    flex: 0 0 7px;
    width: 7px;
    height: 7px;
    margin-left: 10px;
    background: #F1416C;
    border-radius: 50%;
}

@media (max-width: 767.98px) {
    .criteria-project-selector {
        width: 100%;
    }
}

/* Supporting Document card under a sub-question that has a Document (Excel "Document" column). */
.criteria-document {
    width: 100%;
    box-sizing: border-box;
    margin-top: 1rem;
    padding: 20px;
    background-color: var(--bs-body-bg);
    border: 1px solid #DBDFE9;
    border-radius: 15px;
}

/* Revision note and history action follow the Vendor Criteria design spec. */
.revise-note {
    width: 100%;
    min-height: fit-content;
    margin-top: 20px;
    padding: 20px;
    box-sizing: border-box;
    background-color: #FFF9E6;
    border: 1px dashed #FFD340;
    border-radius: 20px;
}

.revise-note-title {
    margin-bottom: 5px;
    color: #0A0A0A;
    font-family: 'Poppins', sans-serif;
    font-size: 16px;
    font-weight: 600;
    line-height: 24px;
}

.revise-note-description {
    margin: 0;
    color: #0A0A0A;
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 21px;
    overflow-wrap: break-word;
}

.btn-history-revise {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    flex-wrap: nowrap;
    width: 140px;
    min-width: 140px;
    height: 38px;
    margin-top: 19px;
    padding: 9px 12px;
    color: #3E97FF;
    font-family: 'Poppins', sans-serif;
    font-size: 13px;
    font-weight: 600;
    background-color: #EEF6FF;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    white-space: nowrap;
}

.btn-history-revise i {
    color: #3E97FF;
    flex: 0 0 auto;
    width: 20px;
    font-size: 20px;
}

.criteria-submit-confirmation .modal-dialog { max-width: 500px; }
.criteria-submit-confirmation .modal-content {
    min-height: 291.58px;
    border: 0;
    border-radius: 9.36px;
    box-shadow: 0 7.2px 14.4px rgba(0, 0, 0, 0.1);
}
.criteria-confirmation-close-row {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    min-height: 63.55px;
    padding: 25.2px 25.2px 0;
}
.criteria-confirmation-close-row .btn-close { width: 38.35px; height: 38.35px; opacity: 1; }
.criteria-confirmation-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10.02px;
    padding: 0 50px 36px;
    text-align: center;
}
.criteria-confirmation-body h2 {
    margin: 0;
    color: #181C32;
    font-family: 'Inter', sans-serif;
    font-size: 25.2px;
    font-weight: 600;
    line-height: 30px;
}
.criteria-confirmation-body p {
    max-width: 294px;
    margin: 0;
    color: #99A1B7;
    font-family: 'Inter', sans-serif;
    font-size: 15.5px;
    line-height: 23px;
}
.criteria-confirmation-actions {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    padding: 20px 20px 36px;
}
.criteria-confirmation-actions .btn {
    min-width: 92px;
    height: 48px;
    padding: 16px 24px;
    border: 0;
    border-radius: 6px;
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 600;
    line-height: 16px;
}
.criteria-confirmation-cancel { color: #78829D; background: #F9F9F9; }
.criteria-confirmation-confirm { min-width: 103px !important; color: #FFFFFF; background: #3E97FF; }

.criteria-submit-success .modal-dialog { max-width: 300px; }
.criteria-submit-success .modal-content {
    width: auto;
    min-height: 0;
    align-items: center;
    box-sizing: border-box;
    padding: 24px 20px;
    gap: 14px;
    border: 0;
    border-radius: 8.45px;
}
.criteria-success-icon {
    position: relative;
    flex: 0 0 56px;
    width: 56px;
    height: 56px;
    border: 3px solid #CBF0DC;
    border-radius: 50%;
}
.criteria-success-icon::before,
.criteria-success-icon::after {
    position: absolute;
    content: "";
    height: 4px;
    border-radius: 3px;
    background: #50CD89;
}
.criteria-success-icon::before {
    width: 14px;
    left: 11px;
    top: 29px;
    transform: rotate(45deg);
}
.criteria-success-icon::after {
    width: 25px;
    left: 20px;
    top: 24px;
    transform: rotate(-45deg);
}
.criteria-success-message {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: auto;
    max-height: 200px;
    overflow: auto;
    color: #252F4A;
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    font-weight: 400;
    line-height: 18px;
    text-align: center;
}
.criteria-success-actions {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 58px;
    padding: 10px 0 0;
}
.criteria-success-ok {
    width: 123px;
    height: 48px;
    padding: 16px 24px;
    color: #FFFFFF;
    background: #3E97FF;
    border: 0;
    border-radius: 6px;
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 600;
    line-height: 16px;
}

.criteria-history-dialog { max-width: 600px; }
.criteria-history-dialog .modal-content {
    width: 600px;
    min-height: 468.55px;
    border: 0;
    border-radius: 9.36px;
    box-shadow: 0 7.2px 14.4px rgba(0, 0, 0, 0.1);
}
.criteria-history-close-row {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    width: 100%;
    min-height: 63.55px;
    padding: 25.2px 25.2px 0;
    box-sizing: border-box;
}
.criteria-history-close-row .btn-close { width: 38.35px; height: 38.35px; opacity: 1; }
.criteria-history-body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 25px;
    width: 100%;
    min-height: 317px;
    padding: 0 50px 36px;
    box-sizing: border-box;
}
.criteria-history-body h2 {
    align-self: stretch;
    margin: 0;
    color: #181C32;
    font-family: 'Inter', sans-serif;
    font-size: 25.2px;
    font-weight: 600;
    line-height: 30px;
    text-align: center;
}
.criteria-history-list {
    position: relative;
    width: 100%;
    max-height: 225px;
    overflow-y: auto;
    padding-left: 20px;
    box-sizing: border-box;
}
.criteria-history-list::before {
    position: absolute;
    top: 5px;
    bottom: 5px;
    left: 5px;
    width: 2px;
    content: "";
    background: #D8D8E5;
}
.criteria-history-entry {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    min-height: 100px;
}
.criteria-history-dot {
    position: absolute;
    top: 2px;
    left: -20px;
    width: 10px;
    height: 10px;
    box-sizing: border-box;
    background: #D8D8E5;
    border: 1px solid #D8D8E5;
    border-radius: 50%;
}
.criteria-history-detail { flex: 1; min-width: 0; }
.criteria-history-title {
    margin-bottom: 4px;
    color: #181C32;
    font-family: 'Inter', sans-serif;
    font-size: 18px;
    font-weight: 600;
    line-height: 20px;
}
.criteria-history-note {
    color: #5E6278;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 500;
    line-height: 24px;
    overflow-wrap: anywhere;
}
.criteria-history-date {
    margin-top: 4px;
    color: #5E6278;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 24px;
}
.criteria-history-actions {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    min-height: 88px;
    padding: 20px;
    box-sizing: border-box;
}
.criteria-history-close {
    width: 100px;
    height: 48px;
    padding: 16px 24px;
    color: #78829D;
    background: #F9F9F9;
    border: 0;
    border-radius: 6px;
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 600;
    line-height: 16px;
}

.criteria-submit-error .modal-dialog { max-width: 500px; }
.criteria-submit-error .modal-content {
    align-items: center;
    min-height: 257px;
    padding: 35px 25px;
    gap: 14px;
    border: 0;
    border-radius: 8.45px;
}
.criteria-error-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 71px;
    height: 71px;
    color: #F1416C;
    border: 3px solid #FAD2DE;
    border-radius: 50%;
    font-family: 'Inter', sans-serif;
    font-size: 38px;
    font-weight: 600;
}
.criteria-error-title {
    color: #252F4A;
    font-family: 'Inter', sans-serif;
    font-size: 18px;
    font-weight: 600;
    line-height: 22px;
    text-align: center;
}
.criteria-error-message {
    width: 450px;
    max-width: 100%;
    color: #5E6278;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 22px;
    text-align: center;
    overflow-wrap: anywhere;
}
.criteria-error-actions {
    display: flex;
    justify-content: center;
    width: 100%;
    padding-top: 6px;
}
.criteria-error-ok {
    width: 100px;
    height: 48px;
    padding: 16px 24px;
    color: #FFFFFF;
    background: #3E97FF;
    border: 0;
    border-radius: 6px;
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 600;
    line-height: 16px;
}

/* Submit dialogs use same compact sizing as shared logout confirmation. */
.criteria-submit-confirmation .modal-dialog,
.criteria-submit-success .modal-dialog,
.criteria-submit-error .modal-dialog {
    max-width: 300px;
}
.criteria-submit-confirmation .modal-content,
.criteria-submit-success .modal-content,
.criteria-submit-error .modal-content {
    width: auto;
    min-height: 0;
    height: auto;
    padding: 0;
    gap: 0;
    border: 0;
    border-radius: .475rem;
    box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15);
}
.criteria-submit-confirmation .criteria-confirmation-close-row,
.criteria-submit-error .criteria-confirmation-close-row {
    min-height: 0;
    padding: 1rem 1rem 0;
}
.criteria-submit-confirmation .criteria-confirmation-body,
.criteria-submit-error .criteria-confirmation-body {
    gap: .5rem;
    padding: 1rem 1.25rem;
}
.criteria-submit-confirmation .criteria-confirmation-body h2,
.criteria-submit-error .criteria-error-title {
    font-size: 1.25rem;
    line-height: 1.5;
}
.criteria-submit-confirmation .criteria-confirmation-body p,
.criteria-submit-error .criteria-error-message {
    max-width: 100%;
    font-size: .95rem;
    line-height: 1.5;
}
.criteria-submit-confirmation .criteria-confirmation-actions,
.criteria-submit-error .criteria-error-actions {
    justify-content: space-between;
    min-height: 0;
    padding: 0 1.25rem 1.25rem;
}
.criteria-submit-success .modal-content,
.criteria-submit-error .modal-content {
    padding: 1.5rem 1.25rem;
    gap: .75rem;
}
.criteria-submit-success .criteria-success-icon,
.criteria-submit-error .criteria-error-icon {
    flex-basis: 56px;
    width: 56px;
    height: 56px;
}
.criteria-submit-success .criteria-success-message,
.criteria-submit-error .criteria-error-message {
    width: 100%;
    height: auto;
}
.criteria-submit-success .criteria-success-actions {
    height: auto;
    padding: .25rem 0 0;
}

/* Keep every submit modal's copy and actions aligned with shared logout modal. */
.criteria-submit-confirmation .criteria-confirmation-body h2,
.criteria-submit-error .criteria-error-title {
    margin: 0;
    color: #181C32;
    font-family: inherit;
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.5;
}
.criteria-submit-confirmation .criteria-confirmation-body p,
.criteria-submit-success .criteria-success-message,
.criteria-submit-error .criteria-error-message {
    color: #181C32;
    font-family: inherit;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
}
.criteria-submit-confirmation .criteria-confirmation-actions .btn,
.criteria-submit-success .criteria-success-actions .btn,
.criteria-submit-error .criteria-error-actions .btn {
    width: auto;
    min-width: 0 !important;
    height: auto;
    padding: .75rem 1.5rem;
    border-radius: .475rem;
    font-family: inherit;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.5;
}
.criteria-submit-confirmation .criteria-confirmation-cancel,
.criteria-submit-error .criteria-error-ok {
    color: #78829D;
    background: #F9F9F9;
}
.criteria-submit-confirmation .criteria-confirmation-confirm,
.criteria-submit-success .criteria-success-ok {
    color: #FFFFFF;
    background: #3E97FF;
}

.criteria-document-title {
    font-size: 1.35rem;
    font-weight: 600;
    color: #071437;
    margin-bottom: 1rem;
}

.criteria-dropzone {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 150px;
    border: 2px dashed #E4E6EF;
    border-radius: 8px;
    cursor: pointer;
    text-align: center;
}

.criteria-dropzone.dragover {
    border-color: var(--bs-primary);
}

.criteria-dropzone-content {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 6px;
    max-width: calc(100% - 24px);
    margin-bottom: 6px;
}

.criteria-selected-files {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    min-width: 0;
}

.criteria-selected-row {
    width: max-content;
    max-width: 100%;
    justify-self: center;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    margin-top: 18px;
    margin-bottom: 8px;
}

.criteria-selected-file {
    min-width: 0;
    overflow-wrap: anywhere;
    text-align: left;
}

.criteria-file-remove {
    flex-shrink: 0;
}

.criteria-file-progress {
    grid-column: 1 / -1;
    min-width: 0;
}

.criteria-file-progress .progress {
    height: 20px;
}

.criteria-file-progress .progress-bar {
    transition: none;
}

.criteria-file-percent {
    display: block;
    text-align: right;
    margin-top: 4px;
}

.criteria-submit {
    min-width: 100px;
    padding: 12px 16px;
    border-radius: 6px;
}

/* ---- Form labels ---- */
:root {
    --kmsi-label-color: #59668a;
}

.form-label {
    color: var(--kmsi-label-color);
}

/* ---- Login button (.btn-login) ----
 * Used only on the sign-in page instead of .btn-primary. Every state is set explicitly so the theme's primary
 * colours never show through. */
:root {
    --kmsi-btn-login-bg: #ffc239;
    --kmsi-btn-login-color: #140a9a;
    --kmsi-btn-login-bg-hover: #d7a229;
}

.btn.btn-login {
    --bs-btn-color: var(--kmsi-btn-login-color);
    --bs-btn-bg: var(--kmsi-btn-login-bg);
    --bs-btn-border-color: var(--kmsi-btn-login-bg);
    --bs-btn-hover-color: var(--kmsi-btn-login-color);
    --bs-btn-hover-bg: var(--kmsi-btn-login-bg-hover);
    --bs-btn-hover-border-color: var(--kmsi-btn-login-bg-hover);
    --bs-btn-active-color: var(--kmsi-btn-login-color);
    --bs-btn-active-bg: var(--kmsi-btn-login-bg-hover);
    --bs-btn-active-border-color: var(--kmsi-btn-login-bg-hover);
    color: var(--kmsi-btn-login-color);
    background-color: var(--kmsi-btn-login-bg);
    border-color: var(--kmsi-btn-login-bg);
}

.btn.btn-login:hover:not(:disabled),
.btn.btn-login:focus-visible,
.btn.btn-login:active:not(:disabled),
.btn.btn-login[data-kt-indicator=on] {
    color: var(--kmsi-btn-login-color);
    background-color: var(--kmsi-btn-login-bg-hover);
    border-color: var(--kmsi-btn-login-bg-hover);
}

/* ---- KMSI custom colour tokens ----
 * Reusable app-specific colours, following Bootstrap's own bg-* /text-* utility convention
 * (bg-primary, text-primary, etc.) so any element anywhere can opt in with a class instead of a
 * one-off rule. Add more --kmsi-color-* tokens + .bg-* /.text-* pairs here as new colours are needed. */
:root {
    --kmsi-color-blue-light: #d0dfff9c;
    --kmsi-color-rose-light: #ffd6dd9c;
    --kmsi-color-teal-light: #cdeef09c;
    --kmsi-color-purple-light: #e2d6f79c;
    --kmsi-color-green-light: #d3f5df9c;
    --kmsi-color-amber-light: #fdecc89c;
    /* Komatsu logo blue (the fill of img/logo-komatsu.svg and the colour of logo-blue.png). */
    --kmsi-color-blue-komatsu: #140a9a;
}

.bg-blue-light { background-color: var(--kmsi-color-blue-light, #d0dfff9c) !important; }
.bg-rose-light { background-color: var(--kmsi-color-rose-light, #ffd6dd9c) !important; }
.bg-teal-light { background-color: var(--kmsi-color-teal-light, #cdeef09c) !important; }
.bg-purple-light { background-color: var(--kmsi-color-purple-light, #e2d6f79c) !important; }
.bg-green-light { background-color: var(--kmsi-color-green-light, #d3f5df9c) !important; }
.bg-amber-light { background-color: var(--kmsi-color-amber-light, #fdecc89c) !important; }

.text-blue-light { color: var(--kmsi-color-blue-light, #d0dfff9c) !important; }
.text-rose-light { color: var(--kmsi-color-rose-light, #ffd6dd9c) !important; }
.text-teal-light { color: var(--kmsi-color-teal-light, #cdeef09c) !important; }
.text-purple-light { color: var(--kmsi-color-purple-light, #e2d6f79c) !important; }
.text-green-light { color: var(--kmsi-color-green-light, #d3f5df9c) !important; }
.text-amber-light { color: var(--kmsi-color-amber-light, #fdecc89c) !important; }

.bg-blue-komatsu { background-color: var(--kmsi-color-blue-komatsu, #140a9a) !important; }
.text-blue-komatsu { color: var(--kmsi-color-blue-komatsu, #140a9a) !important; }
.border-blue-komatsu { border-color: var(--kmsi-color-blue-komatsu, #140a9a) !important; }
.btn-blue-komatsu { --bs-btn-color: #fff; --bs-btn-bg: var(--kmsi-color-blue-komatsu, #140a9a); --bs-btn-border-color: var(--kmsi-color-blue-komatsu, #140a9a);
    --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #0f0777; --bs-btn-hover-border-color: #0f0777; }

/* ---- Header page-title block: consistent height across variants ----
 * The theme's #kt_content has a fixed top padding (25px, style.bundle.css) that assumes a
 * two-line title+subtitle block (VendorDashboards). The single-line breadcrumb used everywhere
 * else (_Breadcrumb.cshtml) is much shorter, so with the same fixed content padding below it the
 * gap looks far bigger. Fix the header block's own height instead of touching that shared
 * content padding (which VendorDashboards still needs). Desktop-only (pb-lg-0 already zeroes the
 * mobile/tablet bottom padding for a different, swapper-driven layout). */
@media (min-width: 992px) {
    #kt_header_container .page-title {
        min-height: 45px;
    }
}

/* ---- Aside offset: theme insets the floating aside 50px (style.bundle.css) and pads .wrapper
 * 350px (50px + 300px aside). Tighten to 25px; wrapper = 25px + 300px. Desktop-only like the theme. */
@media (min-width: 992px) {
    .aside {
        top: 25px;
        bottom: 25px;
        left: 25px;
    }

    .wrapper {
        padding-left: 325px;
    }

    .header-fixed[data-kt-sticky-header=on] .header {
        left: 325px;
    }
}

/* Mid-size desktops (e.g. 1366px laptops): the fixed 300px aside eats ~22% of the width and its
 * 1.1rem menu text reads oversized. Narrow the aside to 260px (wrapper/sticky header = 25px + 260px)
 * and step the menu text/icons down. */
@media (min-width: 992px) and (max-width: 1399.98px) {
    .aside {
        width: 260px;
    }

    .wrapper {
        padding-left: 285px;
    }

    .header-fixed[data-kt-sticky-header=on] .header {
        left: 285px;
    }

    #kt_aside .menu .menu-item .menu-link .menu-title {
        font-size: 1rem;
    }

    #kt_aside .menu .menu-item .menu-link .menu-icon i {
        font-size: 1.2rem !important;
    }
}

/* ---- Header bar: shrink fixed 80px height to a min-height so it hugs shorter content ---- */
#kt_header {
    height: auto;
    min-height: 45px;
}

/* ---- Badge sizing (theme default: padding-x .5rem, padding-y .325rem, radius .3rem) ---- */
.badge {
    --bs-badge-padding-x: 0.75rem;
    --bs-badge-padding-y: 0.75rem;
    --bs-badge-border-radius: 0.7rem;
}

/* DataTables.net's "Processing" overlay — position/transform reverted to the theme's own default
 * (plugins.bundle.css: div.dataTables_wrapper div.dataTables_processing{...}); only the background
 * colour is overridden here (theme default is var(--bs-tooltip-bg), a dark tooltip colour). */
div.dataTables_wrapper div.dataTables_processing {
    background-color: #fff;
    z-index: 1;
}

/* Reserve at least ~2 data rows of height on every DataTables.net table in this app (Project
 * History, Vendor Dashboards' outstanding-invoices table, and any future one using this same
 * table-row-bordered gy-5 markup), so an empty/loading state doesn't collapse into a thin sliver.
 * Row height with this markup: cell padding-y 1.25rem×2 (theme's .table.gy-5 override) + the
 * tallest cell content — our Status/Completeness columns render badges, whose own padding-y
 * (0.75rem×2, see the badge override above) makes them taller than plain text — + 1px border
 * ≈ 79px/row, so 2 rows ≈ 158px; rounded up to 10rem (160px) for a little headroom. min-height on
 * <table> itself, not <tbody> — browsers don't reliably grow an empty/near-empty <tbody> to a
 * min-height since it's a table-row-group, not a normal block box. */
.table-row-bordered.gy-5 {
    min-height: 14rem;
}

/* ---- Reusable helpers for stat-card layouts (e.g. VendorDashboards' status cards) ----
 * .card-icon-corner: pins a decorative icon to a card's top-right corner, behind the stat text
 * (z-index:0 vs .card-stat-text's z-index:1). Requires the ancestor .card to keep Bootstrap's
 * default position:relative (untouched here) so it anchors correctly.
 * .card-stat-text: lifts the number/label above the icon — needs position:relative for z-index
 * to apply at all (static-positioned elements ignore it).
 * .lh-normal: Bootstrap ships lh-1/lh-sm/lh-base/lh-lg but not plain "normal" — large oversized
 * numbers (fs-3x and up) look cramped under lh-base, this restores the browser default. */
.card-icon-corner {
    position: absolute;
    top: 2rem;
    right: 2rem;
    z-index: 0;
}

.card-stat-text {
    position: relative;
    z-index: 1;
}

.lh-normal {
    line-height: normal !important;
}

/* ---- Header profile (_Header.cshtml): the trigger row opens the profile menu ---- */
#kt_header_profile .header-profile-trigger {
    border-radius: 1.5rem;
    cursor: pointer;
    transition: background-color .15s ease;
}
/* Targeted by id: data-kt-menu-overflow moves this dropdown to <body> while it is open. */
#kt_header_profile_menu {
    border-radius: 1.5rem;
}
#kt_header_profile .header-profile-trigger:hover,
#kt_header_profile .header-profile-trigger.show {
    background-color: rgba(59, 99, 186, .12);
}

/*
 * General Information form (Figma "Komatsu Vendor Selection" 1780-13462 ... 1876-10903). Metronic form components,
 * sized and coloured to the design: 38px inputs with an #E1E3EA border, 12px labels, 25px grid gaps, horizontal step nav.
 */
#gi_page { --gi-primary: #009EF6; --gi-primary-light: #ECF8FF; --gi-text: #181C32; --gi-muted: #7E8299; --gi-hint: #99A1B7; --gi-border: #E1E3EA; }
#gi_page .gap-7px { gap: 7px; }
#gi_page .gap-10px { gap: 10px; }
#gi_page .gap-20px { gap: 20px; }
#gi_page .gap-26px { gap: 26px; }
#gi_page.gap-30px, #gi_page .gap-30px { gap: 30px; }
#gi_page .gi-card { background: #fff; border-radius: 15px; box-shadow: 0 4px 20px 0 rgba(76, 87, 125, .05); }
#gi_page .gi-page-header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; padding: 22px 30px; }
#gi_page .gi-title { font-size: 22px; font-weight: 600; line-height: 27px; color: var(--gi-text); margin: 0 0 2px; }
#gi_page .gi-subtitle, #gi_page .gi-hint { font-size: 13px; line-height: 19.5px; color: var(--gi-hint); }
#gi_page .gi-meta-label { font-size: 12.4px; line-height: 18.52px; color: var(--gi-hint); }
#gi_page .gi-meta-value { font-size: 14px; font-weight: 600; line-height: 20.96px; color: #071437; margin-top: 3px; }
#gi_page .gi-badge { font-size: 14px; font-weight: 600; line-height: 12px; padding: 8px 15px; border-radius: 4px; }
#gi_page .gi-required { color: #F1416C; margin-left: 3px; }

/* Step nav */
#gi_stepper .gi-nav { display: flex; gap: 7px; padding: 25px 30px; }
#gi_stepper .gi-nav-item { position: relative; flex: 1 1 0; display: flex; flex-direction: column; align-items: center; gap: 10px; cursor: pointer; }
#gi_stepper .gi-nav-item:not(:last-child)::after {
    content: ""; position: absolute; top: 20px; height: 2px; background: var(--gi-primary-light);
    left: calc(50% + 30px); right: calc(-50% + 23px);
}
#gi_stepper .gi-nav-icon {
    width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center;
    background: var(--gi-primary-light); color: var(--gi-primary); font-size: 20px;
}
#gi_stepper .gi-nav-label { font-size: 14px; font-weight: 600; line-height: 16.77px; text-align: center; color: var(--gi-muted); }
#gi_stepper .gi-nav-item.current .gi-nav-icon { background: var(--gi-primary); color: #fff; }
#gi_stepper .gi-nav-item.current .gi-nav-label { color: var(--gi-text); }
/* Nav icons: 1.5rem; white up to the current step, primary on the steps after it. */
#gi_stepper .gi-nav-icon i.fa-solid { font-size: 1.5rem; color: var(--gi-primary); }
#gi_stepper .gi-nav-item.current .gi-nav-icon i.fa-solid,
#gi_stepper .gi-nav-item.completed .gi-nav-icon i.fa-solid { color: #fff; }
/* Steps before the current one: white icon on the btn-primary colour, and a thicker, solid connector up to the next step. */
#gi_stepper .gi-nav-item.completed .gi-nav-icon { background: var(--bs-primary); color: #fff; }
#gi_stepper .gi-nav-item.completed .gi-nav-label { color: var(--gi-text); }
#gi_stepper .gi-nav-item.completed:not(:last-child)::after { top: 19px; height: 3px; border-radius: 2px; background: var(--bs-primary); }
#gi_stepper .gi-nav-item:focus-visible { outline: 2px solid var(--gi-primary); outline-offset: 4px; border-radius: 10px; }

/* Step card */
#gi_page .gi-step-card { background: #fff; border-radius: 11.05px; box-shadow: 0 10px 20px 0 rgba(76, 87, 125, .06); padding: 0 30px 5px; }
#gi_page .gi-fieldset { min-width: 0; }
#gi_page .gi-step.current { display: flex; flex-direction: column; gap: 20px; }
#gi_page .gi-step-header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding-top: 30px; }
#gi_page .gi-step-title { font-size: 20px; font-weight: 600; line-height: 23.4px; color: var(--gi-text); margin: 0; }
#gi_page .gi-section-title { font-size: 16px; font-weight: 600; line-height: 23.4px; color: var(--gi-text); }
#gi_page .gi-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 25px; }
#gi_page .gi-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
#gi_page .gi-field, #gi_page .gi-doc { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
#gi_page .gi-doc { gap: 20px; }
#gi_page .gi-field-narrow { max-width: 330px; }
#gi_page .gi-label { font-size: 12px; font-weight: 500; color: var(--gi-text); margin: 0; }
#gi_page .form-control, #gi_page .form-select {
    min-height: 38px; border: 1px solid var(--gi-border); border-radius: 8px; background-color: #fff;
    padding: 9px 15px; font-size: 12px; font-weight: 500; line-height: 18px; color: var(--gi-text);
}
#gi_page .form-select { padding-right: 36px; }
#gi_page .form-control::placeholder { color: var(--gi-muted); }
#gi_page .gi-textarea { min-height: 93px; resize: vertical; }
#gi_page .select2-container .select2-selection { min-height: 38px; border-radius: 8px; font-size: 12px; font-weight: 500; }
#gi_page .gi-radios { display: flex; align-items: center; gap: 30px; }
#gi_page .gi-radios .form-check-input, #gi_page .gi-top .form-check-input { width: 26px; height: 26px; }
#gi_page .gi-radios .form-check-label, #gi_page .gi-top .form-check-label { font-size: 12px; font-weight: 600; color: #5E6278; }
#gi_page .gi-upload-row { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 20px; }
#gi_page .gi-upload-btn { padding: 9px 12px; border-radius: 6px; font-size: 13px; font-weight: 600; line-height: 14px; }
#gi_page .gi-upload-btn i { font-size: 14px; }
#gi_page .gi-file-list { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
#gi_page .gi-file-list:empty { display: none; }
#gi_page .gi-file { display: flex; align-items: center; gap: 20px; min-width: 0; }
#gi_page .gi-file-name { color: var(--gi-primary); font-size: 13px; font-weight: 500; line-height: 20px; word-break: break-all; }
#gi_page .gi-file-size { font-weight: 600; }
#gi_page .gi-file-source { font-size: 11px; }
#gi_page .gi-file-remove { width: 30px; height: 30px; border-radius: 16px; background: #FFF1F0; color: #F1416C; flex: none; }
#gi_page .gi-file-remove:hover { background: #F1416C; color: #fff; }
#gi_page .gi-repeat-rows { display: flex; flex-direction: column; gap: 20px; }
#gi_page .gi-repeater { display: flex; flex-direction: column; gap: 20px; }
#gi_page .gi-repeat-box { display: flex; flex-direction: column; gap: 20px; padding: 25px; background: #F9F9F9; border: 1px dashed #E4E6EF; border-radius: 10px; }
#gi_page .gi-repeat-title { font-size: 13px; font-weight: 600; line-height: 23.4px; color: #071437; }
#gi_page .gi-repeat-rows > .gi-repeat-row:only-child .gi-repeat-delete { display: none; }
#gi_page .gi-top-grid { display: grid; grid-template-columns: repeat(2, minmax(0, max-content)); gap: 21px 40px; }
#gi_page .gi-tooltip { color: var(--gi-hint); font-size: 14px; cursor: help; }
#gi_page .gi-notice {
    padding: 20px; border: 1px dashed #FFD340; border-radius: 20px; background: #FFF9E6;
    font-family: Poppins, Inter, sans-serif; font-size: 16px; font-weight: 500; line-height: 26px; text-align: center; color: #0A0A0A;
}
#gi_page .gi-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; margin-top: 20px; padding: 20px 0; border-top: 1px solid var(--gi-border); }
#gi_page .gi-btn { padding: 16px 24px; border-radius: 6px; font-size: 16px; font-weight: 600; line-height: 16px; }
#gi_page .gi-btn-fixed { min-width: 100px; }
#gi_page .gi-doc .invalid-feedback, #gi_page .gi-repeater > .invalid-feedback, #gi_page .gi-top .invalid-feedback { margin-top: -10px; }
#gi_page .gi-doc.is-invalid .gi-upload-btn { box-shadow: 0 0 0 1px var(--bs-danger); }
#gi_page .gi-has-error .gi-label { color: var(--bs-danger); }
/* Read-only (pending / approved): label + plain value, no form controls. */
#gi_page fieldset:disabled .gi-label { font-size: 14px; font-weight: 600; line-height: 21px; color: var(--gi-text); }
#gi_page .gi-value { font-size: 14px; font-weight: 400; line-height: 21px; color: var(--gi-text); white-space: pre-line; overflow-wrap: anywhere; }
#gi_page .gi-doc.gi-view { gap: 7px; }
#gi_page .gi-view .gi-file-list { gap: 6px; }
#gi_page .gi-view .gi-file-name { font-size: 14px; font-weight: 400; }

@media (max-width: 991.98px) {
    #gi_stepper .gi-nav { overflow-x: auto; padding: 20px 16px; }
    #gi_stepper .gi-nav-item { min-width: 110px; }
    #gi_page .gi-step-card { padding: 0 16px 5px; }
    #gi_page .gi-page-header { padding: 20px 16px; }
}
@media (max-width: 767.98px) {
    #gi_page .gi-grid, #gi_page .gi-grid-3 { grid-template-columns: minmax(0, 1fr); }
    #gi_page .gi-field-narrow { max-width: none; }
    #gi_page .gi-top-grid { grid-template-columns: minmax(0, 1fr); }
}

/*
 * Sidebar on Komatsu blue (bg-blue-komatsu, see _Aside.cshtml): the menu and logo sit on a dark
 * background, so their text/icons are white. Idle items are slightly dimmed; hover / active get a translucent white pill.
 */
#kt_aside .menu .menu-item .menu-link .menu-title,
#kt_aside .menu .menu-item .menu-link .menu-icon i { color: rgba(255, 255, 255, 0.78); }
#kt_aside .menu .menu-item .menu-link:hover,
#kt_aside .menu .menu-item .menu-link.active { background-color: rgba(255, 255, 255, 0.14); }
#kt_aside .menu .menu-item .menu-link:hover .menu-title,
#kt_aside .menu .menu-item .menu-link:hover .menu-icon i,
#kt_aside .menu .menu-item .menu-link.active .menu-title,
#kt_aside .menu .menu-item .menu-link.active .menu-icon i { color: #fff; }
#kt_aside .menu .menu-item .menu-link.active { background-color: rgba(255, 255, 255, 0.22); }

/*
 * Theme primary = Komatsu blue (#140a9a, same as --kmsi-color-blue-komatsu), so text-primary, bg-primary, btn-primary,
 * links, focus rings, checked inputs, active menu/nav states etc. all render exactly like text-blue-komatsu.
 * Metronic drives most of these from CSS variables (overridden here); the Bootstrap-level button / form-check rules that
 * hard-code the stock #009ef7 are re-declared below. Keep this block last so it wins over style.bundle.css.
 */
:root,
[data-bs-theme="light"],
[data-bs-theme="dark"] {
    --bs-primary: #140a9a;
    --bs-primary-rgb: 20, 10, 154;
    --bs-primary-active: #0f0777;
    --bs-primary-light: #ecebf7;
    --bs-primary-inverse: #ffffff;
    --bs-primary-bg-subtle: #d0ceeb;
    --bs-primary-border-subtle: #a19dd7;
    --bs-primary-text-emphasis: #0c0662;

    --bs-link-color: #140a9a;
    --bs-link-color-rgb: 20, 10, 154;
    --bs-link-hover-color: #0f0777;
    --bs-link-hover-color-rgb: 15, 7, 119;
    --bs-text-primary: #140a9a;

    --bs-component-active-bg: #140a9a;
    --bs-component-checked-bg: #140a9a;
    --bs-component-hover-color: #140a9a;
    --bs-nav-pills-link-active-bg: #140a9a;
    --bs-progress-bar-bg: #140a9a;
    --bs-menu-link-color-hover: #140a9a;
    --bs-menu-link-color-here: #140a9a;
    --bs-menu-link-color-active: #140a9a;
    --bs-menu-link-color-show: #140a9a;
    --bs-scrolltop-bg-color: #140a9a;
    --bs-ribbon-label-bg: #140a9a;
}

.btn-primary {
    --bs-btn-color: #ffffff;
    --bs-btn-bg: #140a9a;
    --bs-btn-border-color: #140a9a;
    --bs-btn-hover-color: #ffffff;
    --bs-btn-hover-bg: #0f0777;
    --bs-btn-hover-border-color: #0f0777;
    --bs-btn-focus-shadow-rgb: 20, 10, 154;
    --bs-btn-active-color: #ffffff;
    --bs-btn-active-bg: #0f0777;
    --bs-btn-active-border-color: #0f0777;
    --bs-btn-disabled-color: #ffffff;
    --bs-btn-disabled-bg: #140a9a;
    --bs-btn-disabled-border-color: #140a9a;
}

.btn-outline-primary {
    --bs-btn-color: #140a9a;
    --bs-btn-border-color: #140a9a;
    --bs-btn-hover-color: #ffffff;
    --bs-btn-hover-bg: #140a9a;
    --bs-btn-hover-border-color: #140a9a;
    --bs-btn-focus-shadow-rgb: 20, 10, 154;
    --bs-btn-active-color: #ffffff;
    --bs-btn-active-bg: #140a9a;
    --bs-btn-active-border-color: #140a9a;
    --bs-btn-disabled-color: #140a9a;
    --bs-btn-disabled-border-color: #140a9a;
}

.form-check-input:checked,
.form-check-input[type="checkbox"]:indeterminate {
    background-color: #140a9a;
    border-color: #140a9a;
}

.form-range::-webkit-slider-thumb,
.form-range::-moz-range-thumb {
    background-color: #140a9a;
}

.separator.separator-content.border-primary::before,
.separator.separator-content.border-primary::after {
    border-color: #140a9a !important;
}

/* Invoice Management System status tabs: 2px Komatsu-blue underline under the current tab. */
#InvoiceTabs .nav-link.active,
#InvoiceTabs .nav-link:hover.active {
    border-bottom: 2px solid var(--kmsi-color-blue-komatsu, #140a9a);
    color: var(--kmsi-color-blue-komatsu, #140a9a);
}

/* The tab list scrolls (overflow-auto), which clips the tabs' -2px overlap onto the list's own bottom border and hid the
   underline. Reserve that 2px as padding and draw the grey baseline as an inset shadow so the blue underline sits on it. */
#InvoiceTabs {
    padding-bottom: 2px;
    border-bottom: 0;
    box-shadow: inset 0 -2px 0 var(--bs-border-color);
}

/* ---- Safety Data Sheet: "SDS - List Files" (docs/figma-specs/sds-list-files-spec.md) ----
 * Values are estimated from a design screenshot (no Figma inspect), so they are approximate. */
:root {
    --kmsi-sds-head-bg: #e1effc;
    --kmsi-sds-head-color: #0d3b85;
}

#kt_sds .sds-filter-btn {
    min-width: 7.5rem;
}

.sds-table thead tr th {
    background-color: var(--kmsi-sds-head-bg);
    color: var(--kmsi-sds-head-color);
    font-size: 1.1rem;
    white-space: nowrap;
    padding-top: 1.1rem;
    padding-bottom: 1.1rem;
}

/* First/last cells: Metronic zeroes their side padding (.table:not(.table-bordered) th:first-child), which put "NO" flush against the blue header edge. */
.table.sds-table > thead > tr > th:first-child,
.table.sds-table > tbody > tr > td:first-child {
    padding-left: 1.25rem;
}

.table.sds-table > thead > tr > th:last-child,
.table.sds-table > tbody > tr > td:last-child {
    padding-right: 1.25rem;
}

/* Sorting is driven by msds-list.js (none -> asc -> desc -> none) with its own icon on the left of the text,
 * so DataTables' own arrows are hidden. */
table.dataTable.sds-table > thead > tr > th::before,
table.dataTable.sds-table > thead > tr > th::after {
    display: none !important;
}

table.dataTable.sds-table > thead > tr > th {
    padding-right: 0.75rem;
}

.sds-table thead th.sds-sortable {
    cursor: pointer;
    user-select: none;
}

.sds-table .sds-sort-icon {
    color: var(--kmsi-sds-head-color);
    margin-right: 0.5rem;
    font-size: 0.95rem;
}

.sds-table tbody td {
    font-size: 1rem;
}

/* ---- SDS status badges: the standard status colours for every SDS screen ---- */
:root {
    --kmsi-sds-on-review-color: #ee6108;
    --kmsi-sds-on-review-bg: #ffefd4;
    --kmsi-sds-expired-color: #d04632;
    --kmsi-sds-expired-bg: #fce7e4;
    --kmsi-sds-submitted-color: #1b991d;
    --kmsi-sds-submitted-bg: #ddfbdd;
}

.badge.badge-sds-on-review { color: var(--kmsi-sds-on-review-color); background-color: var(--kmsi-sds-on-review-bg); }
.badge.badge-sds-expired { color: var(--kmsi-sds-expired-color); background-color: var(--kmsi-sds-expired-bg); }
.badge.badge-sds-submitted { color: var(--kmsi-sds-submitted-color); background-color: var(--kmsi-sds-submitted-bg); }

.sds-table .sds-status {
    border-radius: 2rem;
    min-width: 6rem;
    justify-content: center;
    font-size: 1rem;
    font-weight: 600;
}

/* "Show detail" action: rounded tinted square, a little darker on hover/focus. */
.btn.btn-icon.btn-sds-view {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 6px;
    color: #34b1fd;
    background-color: #daf3ff;
    border: 0;
}

.btn.btn-icon.btn-sds-view i {
    color: inherit;
    font-size: 1.1rem;
}

.btn.btn-icon.btn-sds-view:hover,
.btn.btn-icon.btn-sds-view:focus-visible,
.btn.btn-icon.btn-sds-view:active {
    color: #1a98e6;
    background-color: #c4eaff;
}

/* Pagination: Previous/Next outlined, page numbers grey, the current page outlined. */
#kt_sds .dataTables_paginate .pagination {
    gap: 0.5rem;
}

#kt_sds .dataTables_paginate .page-item .page-link {
    border-radius: 0.475rem;
    min-width: 2.5rem;
    height: 2.5rem;
    background-color: var(--bs-gray-200);
    color: var(--bs-gray-700);
    border: 1px solid transparent;
}

#kt_sds .dataTables_paginate .page-item.previous .page-link,
#kt_sds .dataTables_paginate .page-item.next .page-link {
    background-color: transparent;
    border-color: var(--bs-primary);
    color: var(--bs-gray-700);
    padding: 0 0.85rem;
}

#kt_sds .dataTables_paginate .page-item.active .page-link {
    background-color: var(--bs-gray-200);
    border-color: var(--bs-primary);
    color: var(--bs-gray-800);
}

#kt_sds .dataTables_paginate .page-item.disabled .page-link {
    opacity: 0.5;
}

#kt_sds .sds-table-footer .dataTables_length select {
    min-width: 5.5rem;
}

#kt_sds .sds-table-footer .dataTables_info {
    padding-top: 0;
    color: var(--bs-gray-500);
}

/* ---- Loading indicator (wwwroot/js/kmsi-loading.js, docs/components/loading-indicator.md) ----
 * Ring spinner with a tapered purple arc + "Loading ..." over a faded area. Colours from the design screenshot
 * (estimated). Reusable anywhere: KmsiLoading.show/hide(target) or KmsiLoading.bindDataTable(selector). */
:root {
    --kmsi-loading-arc: #4c1fd6;
    --kmsi-loading-track: #ece9f8;
    --kmsi-loading-veil: rgba(255, 255, 255, 0.72);
    --kmsi-loading-size: 3.25rem;
    --kmsi-loading-thickness: 0.45rem;
}

.kmsi-loading-host {
    position: relative;
}

.kmsi-loading-overlay {
    position: absolute;
    inset: 0;
    border-radius: inherit; /* follows a rounded host, e.g. a modal */
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--kmsi-loading-veil);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.15s ease, visibility 0.15s ease;
}

.kmsi-loading-overlay.show {
    opacity: 1;
    visibility: visible;
}

.kmsi-loading-indicator {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
}

.kmsi-loading-spinner {
    display: block;
    width: var(--kmsi-loading-size);
    height: var(--kmsi-loading-size);
    border-radius: 50%;
    background:
        conic-gradient(from 90deg, transparent 0deg 60deg, color-mix(in srgb, var(--kmsi-loading-arc) 25%, transparent) 120deg, var(--kmsi-loading-arc) 300deg, transparent 300.5deg),
        var(--kmsi-loading-track);
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - var(--kmsi-loading-thickness)), #000 calc(100% - var(--kmsi-loading-thickness) + 1px));
    mask: radial-gradient(farthest-side, transparent calc(100% - var(--kmsi-loading-thickness)), #000 calc(100% - var(--kmsi-loading-thickness) + 1px));
    animation: kmsi-loading-spin 0.9s linear infinite;
}

.kmsi-loading-text {
    color: var(--bs-gray-700);
    font-size: 1rem;
    font-weight: 600;
}

@keyframes kmsi-loading-spin {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .kmsi-loading-spinner { animation-duration: 2.5s; }
}

/* DataTables bound with KmsiLoading.bindDataTable: hide DataTables' own "Processing..." box. */
.kmsi-loading-dt div.dataTables_processing {
    display: none !important;
}

/* ---- Safety Data Sheet: "Upload SDS" modal (docs/figma-specs/sds-upload-spec.md) ----
 * From a design screenshot, so sizes are estimates. The dropzone reuses .criteria-dropzone (Business Partner
 * Criteria) and only restyles its content. */
.sds-upload-dialog {
    max-width: 900px;
}

.sds-upload-modal .modal-content {
    border: 0;
    border-radius: 0.75rem;
    padding: 2.5rem 2.75rem 2.25rem;
}

.sds-upload-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-bottom: 1.5rem;
    margin-bottom: 2rem;
    border-bottom: 1px solid var(--bs-gray-300);
}

.sds-upload-title {
    margin: 0;
    color: var(--bs-gray-900);
    font-size: 2.4rem;
    font-weight: 700;
}

/* Close icon: outlined primary square. !important: Metronic zeroes .btn-icon borders with a long :not() chain. */
.btn.btn-icon.sds-upload-close {
    width: 2.25rem;
    height: 2.25rem;
    border: 1.5px solid var(--bs-primary) !important;
    border-radius: 0.35rem;
    color: var(--bs-primary);
    background: transparent;
}

.btn.btn-icon.sds-upload-close i {
    color: inherit;
    font-size: 1.25rem;
}

.btn.btn-icon.sds-upload-close:hover:not(:disabled) {
    background-color: var(--bs-primary-light);
}

.sds-dropzone {
    min-height: 17rem;
    padding: 2rem 1.5rem;
    gap: 0.75rem;
    border-color: #d3d8e2;
    background-color: #f9fafc;
}

.sds-dropzone.is-invalid {
    border-color: var(--bs-danger);
}

.sds-dropzone .sds-dropzone-icon {
    font-size: 3rem;
    color: #1b9cfc;
}

.sds-dropzone .sds-dropzone-title {
    color: var(--bs-gray-900);
    font-size: 1.6rem;
    font-weight: 600;
}

.sds-dropzone .sds-dropzone-hint {
    color: var(--bs-gray-500);
    font-size: 1rem;
}

.btn.sds-dropzone-browse {
    min-width: 8rem;
    padding: 0.85rem 2rem;
    color: #fff;
    background-color: #1b9cfc;
    font-size: 1.25rem;
    font-weight: 600;
    pointer-events: none; /* the whole dropzone <label> opens the file picker */
}

.sds-dropzone:hover .sds-dropzone-browse {
    background-color: #0d88e6;
}

/* Selected files (SDS only, design): icon, name, "256kb • 15/10/2026 09:20", trash. The bottom line doubles as the
   upload progress track: it fills green per file while uploading, red when that file fails. */
.sds-file-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.sds-file-list:not(:empty) {
    margin-top: 1.25rem;
}

.sds-file {
    position: relative;
    display: flex;
    align-items: center;
    gap: 1.25rem;
    padding: 1.1rem 1.75rem 1.25rem;
}

.sds-file-icon {
    flex: 0 0 auto;
    color: #1b9cfc;
}

.sds-file-info {
    flex: 1 1 auto;
    min-width: 0;
}

.sds-file-name {
    overflow: hidden;
    color: var(--bs-gray-900);
    font-size: 1.35rem;
    font-weight: 500;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sds-file-meta {
    margin-top: 0.35rem;
    color: var(--bs-gray-600);
    font-size: 1.05rem;
}

.sds-file-error:empty {
    display: none;
}

.sds-file-error {
    margin-top: 0.25rem;
    color: var(--bs-danger);
    font-size: 0.95rem;
}

.btn.btn-icon.sds-file-remove {
    flex: 0 0 auto;
    width: 2.5rem;
    height: 2.5rem;
    color: var(--bs-gray-800);
}

.btn.btn-icon.sds-file-remove:hover:not(:disabled) {
    color: var(--bs-danger);
}

.sds-file-progress {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 1px;
    background-color: #d3d8e2;
}

.sds-file-progress-bar {
    width: 0;
    height: 300%;
    transform: translateY(-2px); /* grow upward from the 1px track, not below the row */
    background-color: var(--bs-success);
    transition: width 0.2s ease;
}

.sds-file:not(.is-uploading):not(.is-done):not(.is-failed) .sds-file-progress-bar {
    transition: none;
}

.sds-file.is-failed .sds-file-progress-bar {
    background-color: var(--bs-danger);
}

/* Disabled until Revision No, Last revision Date and Hazard Classification are filled (msds-upload.js). */
.sds-dropzone.is-disabled {
    cursor: not-allowed;
    opacity: 0.55;
}

.sds-dropzone.is-disabled:hover .sds-dropzone-browse {
    background-color: #1b9cfc;
}

/* Select2 (multiple) inside the modal: same height as the inputs; selected chips are light blue (#1b9cfc, same as
   Browse) with white text and a white x. Metronic draws the x as a mask, so its colour is the background-color. */
.sds-upload-modal .select2-container--bootstrap5 .select2-selection--multiple {
    min-height: calc(1.5em + 1.55rem + 2px);
}

.sds-upload-modal .select2-container--bootstrap5 .select2-selection--multiple .select2-selection__rendered .select2-selection__choice {
    background-color: #1b9cfc;
    color: #fff;
    border-radius: 0.35rem;
}

.sds-upload-modal .select2-container--bootstrap5 .select2-selection--multiple .select2-selection__rendered .select2-selection__choice .select2-selection__choice__remove,
.sds-upload-modal .select2-container--bootstrap5 .select2-selection--multiple .select2-selection__rendered .select2-selection__choice .select2-selection__choice__remove:hover {
    background-color: #fff;
    opacity: 1; /* Metronic dims it to 0.5, which reads as grey on the blue chip */
}

.sds-upload-modal .select2-container--bootstrap5 .select2-selection--multiple .select2-selection__rendered .select2-selection__choice .select2-selection__choice__remove:hover {
    opacity: 0.75;
}

.sds-upload-modal .select2-container.is-invalid .select2-selection {
    border-color: var(--bs-danger) !important;
}

.sds-upload-footer {
    display: flex;
    justify-content: flex-end;
    gap: 0.85rem;
    margin-top: 1.75rem;
}

.btn.sds-modal-btn {
    min-width: 7.5rem;
    padding: 0.95rem 1.75rem;
    font-size: 1.25rem;
    font-weight: 600;
}

/* ---- Safety Data Sheet: detail page (docs/figma-specs/sds-detail-spec.md) ----
 * Estimated from a design screenshot. Section state colours reuse the SDS status badge greens; yellow = revision. */
:root {
    --kmsi-sds-state-empty-bg: #e1e3ea;
    --kmsi-sds-state-checked-bg: #1b991d;
    --kmsi-sds-state-revision-bg: #f6c000;
}

.btn.btn-icon.sds-detail-back {
    width: 2rem;
    height: 2rem;
    color: var(--bs-gray-900);
}

.btn.btn-icon.sds-detail-back i {
    color: inherit;
    font-size: 1.25rem;
}

.sds-detail-file {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 30px 12px;
    border-bottom: 1px solid #d8d8e5;
}

.sds-detail-file-icon {
    flex: 0 0 auto;
    color: #34b1fd;
}

.sds-detail-file-info {
    flex: 1 1 auto;
    min-width: 0;
}

.sds-detail-file-name {
    font-size: 1.35rem;
    font-weight: 500;
    color: var(--bs-gray-900);
    overflow-wrap: anywhere;
}

.sds-detail-file-meta {
    font-size: 1.2rem;
    color: var(--bs-gray-600);
}

.btn.btn-icon.sds-detail-file-action {
    width: 2.25rem;
    height: 2.25rem;
    color: var(--bs-gray-600);
}

.btn.btn-icon.sds-detail-file-action:hover,
.btn.btn-icon.sds-detail-file-action:focus-visible {
    color: var(--bs-primary);
    background-color: var(--bs-gray-100);
}

.sds-detail-accordion {
    --bs-accordion-btn-padding-x: 12px;
    --bs-accordion-btn-padding-y: 16px;
    --bs-accordion-body-padding-x: 12px;
    --bs-accordion-active-bg: transparent;
    --bs-accordion-active-color: var(--bs-gray-900);
    --bs-accordion-btn-focus-box-shadow: none;
}

/* Separator between items. Metronic's ".accordion-flush .accordion-item { border: 0 }" removes Bootstrap's, so this
   needs the extra .accordion-flush to win; the last item keeps it too, closing the list. */
.sds-detail-accordion.accordion-flush .accordion-item,
.sds-detail-accordion.accordion-flush .accordion-item:last-child {
    border-bottom: 1px solid #d8d8e5;
}

.sds-detail-accordion .accordion-button {
    gap: 12px;
    font-size: 1.25rem;
    font-weight: 500;
    color: var(--bs-gray-900);
}

/* Section sent back for revision: light yellow, on the collapsed header and its "Needs attention" tooltip. */
:root {
    --kmsi-sds-revision-soft-bg: #fff8df;
}

.sds-detail-accordion .accordion-item.is-revision .accordion-button.collapsed {
    background-color: var(--kmsi-sds-revision-soft-bg);
}

/* Tooltip (msds-detail.js): one line (no 200px max-width), same light yellow; the arrow follows --bs-tooltip-bg. */
.tooltip.sds-tooltip-single-line {
    --bs-tooltip-bg: var(--kmsi-sds-revision-soft-bg);
    --bs-tooltip-color: var(--bs-gray-900);
    --bs-tooltip-max-width: none;
}

.tooltip.sds-tooltip-single-line .tooltip-inner {
    white-space: nowrap;
}

.sds-detail-accordion .accordion-button:focus-visible {
    outline: 2px solid var(--bs-primary);
    outline-offset: -2px;
}

.sds-section-state {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 5px;
    color: #fff;
    background-color: var(--kmsi-sds-state-empty-bg);
}

.sds-section-state i {
    color: inherit;
    font-size: .8rem;
}

.sds-section-state.is-checked { background-color: var(--kmsi-sds-state-checked-bg); }
.sds-section-state.is-revision { background-color: var(--kmsi-sds-state-revision-bg); }

.sds-detail-accordion .accordion-body {
    padding-top: 4px;
    padding-bottom: 24px;
}

/* "Label : value" grid; values keep their line breaks (addresses, lists). */
.sds-section-fields {
    display: grid;
    grid-template-columns: minmax(140px, 220px) 1fr;
    column-gap: 16px;
    row-gap: 18px;
    margin: 0;
}

.sds-section-fields dt {
    font-weight: 600;
    color: var(--bs-gray-800);
}

.sds-section-fields dd {
    position: relative;
    margin: 0;
    padding-left: 16px;
    color: var(--bs-gray-700);
    white-space: pre-line;
}

.sds-section-fields dd::before {
    content: ":";
    position: absolute;
    left: 0;
}

@media (max-width: 575.98px) {
    .sds-section-fields { grid-template-columns: 1fr; row-gap: 4px; }
    .sds-section-fields dd { padding-left: 0; margin-bottom: 12px; }
    .sds-section-fields dd::before { content: none; }
}

/* Section content blocks (MsdsBlockKind), in document order. */
.sds-section-content {
    display: flex;
    flex-direction: column;
    gap: 12px;
    color: var(--bs-gray-700);
}

.sds-section-heading {
    margin: 8px 0 0;
    font-size: 1rem;
    font-weight: 700;
    color: var(--bs-gray-900);
}

.sds-section-subheading {
    margin: 4px 0 -6px;
    font-size: 1rem;
    font-weight: 600;
    color: var(--bs-gray-800);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.sds-section-text {
    margin: 0;
    white-space: pre-line;
}

.sds-section-list {
    margin: 0;
    padding-left: 22px;
    list-style: circle;
}

.sds-section-list li {
    white-space: pre-line;
}

.sds-section-list li + li {
    margin-top: 4px;
}

.sds-section-table {
    width: auto;
    min-width: 50%;
    margin: 0;
}

.sds-section-table th {
    font-weight: 600;
    color: var(--bs-gray-800);
    background-color: var(--bs-gray-100);
    white-space: nowrap;
}

.sds-section-table th,
.sds-section-table td {
    padding: 6px 16px 6px 12px;
    border-bottom: 1px solid var(--bs-border-color);
}

.sds-section-images {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.sds-section-images img {
    width: 72px;
    height: 72px;
    object-fit: contain;
}

.sds-section-remarks {
    margin-top: 24px;
}

.sds-section-remarks-label {
    font-size: .9rem;
    color: var(--bs-gray-900);
    margin-bottom: 8px;
}

.sds-section-remarks-box {
    min-height: 120px;
    padding: 12px 16px;
    border: 1px solid var(--bs-gray-300);
    border-radius: 8px;
    background-color: var(--bs-gray-100);
    color: var(--bs-gray-800);
    white-space: pre-line;
}

.sds-preview-frame {
    display: block;
    width: 100%;
    height: 80vh;
    border: 0;
}