/*
 * 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 ----
 * .criteria-question / .criteria-subquestion: numbered question/sub-question blocks ("1.", "1.1"),
 * indented one level per level so the numbering hierarchy reads visually.
 * .criteria-options: the radio + label pairs per sub-question, stacked one per line (indented a
 * further level) instead of inline in a row. */
.criteria-question + .criteria-question {
    border-top: 1px solid var(--bs-border-color, #e4e6ef);
    margin-top: 1.5rem;
    padding-top: 1.5rem;
}

.criteria-subquestion {
    border-radius: 1rem;
    background-color: #e0e9fd4a;
    padding: 1rem;
    width: fit-content;
    margin-left: 1.5rem;
}

.criteria-subquestion + .criteria-subquestion {
    margin-top: 1rem;
}

.criteria-options {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding-left: 1.5rem;
    margin-top: 0.5rem;
}

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

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

/* ---- Sidebar profile footer (_Aside.cshtml): the .flex-stack row is the click trigger for the profile menu ---- */
#kt_aside {
    padding-bottom: 1rem !important;
}
#kt_aside_footer {
    padding-left: 1rem;
    padding-right: 1rem;
}
#kt_aside_footer > [data-kt-menu-trigger] {
    border-radius: 1.5rem;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
    cursor: pointer;
    transition: background-color .15s ease;
}
/* Targeted by id: data-kt-menu-overflow moves this dropdown to <body> while it is open. */
#kt_aside_profile_menu {
    border-radius: 1.5rem;
}
#kt_aside_footer > [data-kt-menu-trigger]:hover,
#kt_aside_footer > [data-kt-menu-trigger].show {
    background-color: rgba(59, 99, 186, .12);
}

/* Stepper step icons (General Information): the active step sits on the primary background, so its icon is white. */
.stepper.stepper-pills .stepper-item.current .stepper-icon .stepper-number,
.stepper.stepper-pills .stepper-item.current .stepper-icon .stepper-number i {
    color: #fff;
}

/* General Information stepper: only steps that are filled in can be clicked (see general-information.js). */
#gi_stepper .stepper-item .stepper-wrapper { cursor: default; }
#gi_stepper .stepper-item.gi-step-clickable .stepper-wrapper { cursor: pointer; }
#gi_stepper .stepper-item.gi-step-clickable:not(.current) .stepper-label .stepper-title { text-decoration: underline dotted; text-underline-offset: 4px; }

/*
 * General Information stepper: the icon box shows whether a step is filled in (class set by general-information.js) and the
 * icon itself never changes. Metronic swaps the number/icon for a check mark on "completed" steps and paints them its own
 * colour; that is undone here so the box colour alone carries the state:
 *   not filled            -> Metronic default (also the current step while it is still empty: primary)
 *   filled                -> light green
 *   current and filled    -> darker green
 */
#gi_stepper .stepper-item.completed .stepper-icon .stepper-check { display: none; }
#gi_stepper .stepper-item.completed .stepper-icon .stepper-number { display: inline-block; color: var(--bs-stepper-icon-number-color); }
#gi_stepper .stepper-item.completed .stepper-icon {
    background-color: var(--bs-stepper-icon-bg-color);
    border: var(--bs-stepper-icon-border);
}

#gi_stepper .stepper-item.gi-step-filled .stepper-icon {
    background-color: var(--bs-success-light);
    border-color: transparent;
}
#gi_stepper .stepper-item.gi-step-filled .stepper-icon .stepper-number,
#gi_stepper .stepper-item.gi-step-filled .stepper-icon .stepper-number i { color: var(--bs-success); }

#gi_stepper .stepper-item.current.gi-step-filled .stepper-icon { background-color: var(--bs-success); }
#gi_stepper .stepper-item.current.gi-step-filled .stepper-icon .stepper-number,
#gi_stepper .stepper-item.current.gi-step-filled .stepper-icon .stepper-number i { color: #fff; }

/*
 * Sidebar on Komatsu blue (bg-blue-komatsu, see _Aside.cshtml): the menu, logo and profile trigger sit on a dark
 * background, so their text/icons are white. Idle items are slightly dimmed; hover / active get a translucent white pill.
 * The profile dropdown (#kt_aside_profile_menu) is a white popup and keeps the theme's own dark text.
 */
#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); }

#kt_aside .aside-profile-trigger .text-muted { color: rgba(255, 255, 255, 0.7) !important; }
#kt_aside .aside-profile-trigger .fa-gear { color: rgba(255, 255, 255, 0.78) !important; }
#kt_aside .aside-profile-trigger:hover .fa-gear { color: #fff !important; }

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