/* =========================================================
   site.css
   Shared UI theme overrides for MCR-specific surfaces only.
   ========================================================= */

/* =========================================================
   Shared form control theme
   ========================================================= */
.form-control,
.form-select,
.input-group-text,
.twitter-typeahead,
.twitter-typeahead .tt-input,
.twitter-typeahead .tt-hint,
.tagify {
    border-color: var(--bs-gray-300);
}

.form-control::placeholder,
.form-select::placeholder,
.twitter-typeahead .tt-input::placeholder,
.twitter-typeahead .tt-hint::placeholder,
.tagify__input::placeholder {
    color: var(--bs-gray-500);
}

.form-control:hover,
.form-select:hover,
.twitter-typeahead:hover .tt-input,
.tagify:hover {
    border-color: var(--bs-gray-400);
}

.form-control:focus,
.form-select:focus,
.twitter-typeahead .tt-input:focus,
.tagify--focus {
    border-color: rgba(var(--bs-primary-rgb), 0.55);
    box-shadow: 0 0 0 0.2rem rgba(var(--bs-primary-rgb), 0.12);
}

.input-group-text {
    background-color: var(--bs-light);
    color: var(--bs-gray-700);
}


/* =========================================================
   Shared loading overlay
   ========================================================= */
#loading {
    position: fixed;
    inset: 0;
    z-index: 999999;
    width: 100%;
    height: 100%;
    overflow: hidden !important;
    background: #ffffffd9 url('/assets/media/logos/loader.gif') no-repeat center center;
    background-size: 15%;
}

#loading.d-none {
    display: none !important;
}

#loading-center {
    position: relative;
    width: 100%;
    height: 100%;
}

body.page-loading {
    cursor: progress;
}

/* =========================================================
   Shared Tagify theme
   ========================================================= */
.tagify {
    width: 100%;
    min-height: calc(1.5em + 1.65rem + 2px);
    padding: 0.325rem 0.65rem;
    border-radius: 0.475rem;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.tagify__input {
    margin: 0;
    padding: 0.325rem 0;
    min-width: 8rem;
}

.tagify__tag {
    margin-inline: 0 0.5rem;
    margin-block: 0.25rem;
}

/* =========================================================
   Shared typeahead / Bloodhound theme
   ========================================================= */
.twitter-typeahead {
    display: block !important;
    width: 100% !important;
}

.input-group > .twitter-typeahead {
    position: relative;
    flex: 1 1 auto;
    width: 1% !important;
    min-width: 0;
}

.twitter-typeahead .tt-input,
.twitter-typeahead .tt-hint {
    width: 100% !important;
    min-height: calc(1.5em + 1.65rem + 2px);
    padding: 0.825rem 1rem;
    border: 1px solid var(--bs-gray-300);
    border-radius: 0.475rem;
    line-height: 1.5;
}

.twitter-typeahead .tt-hint {
    color: var(--bs-gray-500) !important;
}

.input-group > .twitter-typeahead:not(:last-child) .tt-input,
.input-group > .twitter-typeahead:not(:last-child) .tt-hint {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.input-group > .twitter-typeahead:not(:first-child) .tt-input,
.input-group > .twitter-typeahead:not(:first-child) .tt-hint {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.tt-menu {
    width: 100%;
    margin-top: 0.35rem;
    padding: 0.5rem 0;
    border: 1px solid var(--bs-gray-300);
    border-radius: 0.475rem;
    background-color: var(--bs-body-bg);
    box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.1);
    overflow: hidden;
    z-index: 1080;
}

.tt-suggestion {
    padding: 0.75rem 1rem;
    color: var(--bs-gray-800);
    cursor: pointer;
}

.tt-suggestion p {
    margin-bottom: 0;
}

.tt-suggestion:hover,
.tt-suggestion.tt-cursor,
.tt-suggestion.tt-is-under-cursor {
    background-color: var(--bs-light);
}

/* =========================================================
   Shared tab surfaces
   ========================================================= */
.mcr-page-tabs:not(.mcr-record-wizard-tabs) {
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    width: 100%;
    gap: 0;
    padding: 0.375rem;
    border: 1px solid var(--bs-border-color);
    border-radius: 0.75rem;
    background-color: var(--bs-card-bg, var(--bs-body-bg));
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.01);
}

.mcr-page-tabs:not(.mcr-record-wizard-tabs) .mcr-tab-item,
.mcr-page-tabs:not(.mcr-record-wizard-tabs) .nav-item {
    display: flex;
    flex: 1 1 0;
    min-width: 0;
    margin-bottom: 0;
}

.mcr-page-tabs:not(.mcr-record-wizard-tabs) .nav-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.625rem;
    width: 100%;
    min-height: 4.5rem;
    padding: 1.125rem 1.5rem;
    margin: 0;
    border: 0 !important;
    border-radius: 0 !important;
    background-color: var(--bs-card-bg, var(--bs-body-bg)) !important;
    color: var(--bs-gray-700) !important;
    font-weight: 600;
    text-align: center;
    white-space: normal;
    transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.mcr-page-tabs:not(.mcr-record-wizard-tabs) .nav-item:first-child .nav-link {
    border-top-left-radius: 0.65rem !important;
    border-bottom-left-radius: 0.65rem !important;
}

.mcr-page-tabs:not(.mcr-record-wizard-tabs) .nav-item:last-child .nav-link {
    border-top-right-radius: 0.65rem !important;
    border-bottom-right-radius: 0.65rem !important;
}

.mcr-page-tabs:not(.mcr-record-wizard-tabs) .nav-link:hover,
.mcr-page-tabs:not(.mcr-record-wizard-tabs) .nav-link:focus {
    background-color: rgba(var(--bs-primary-rgb), 0.08) !important;
    color: var(--bs-primary) !important;
}

.mcr-page-tabs:not(.mcr-record-wizard-tabs) .nav-link.active,
.mcr-page-tabs:not(.mcr-record-wizard-tabs) .nav-link.show,
.mcr-page-tabs:not(.mcr-record-wizard-tabs) .nav-item.show .nav-link {
    background-color: var(--bs-primary) !important;
    color: var(--bs-white) !important;
    box-shadow: 0 0.5rem 1.25rem rgba(var(--bs-primary-rgb), 0.18);
}

.mcr-page-tabs:not(.mcr-record-wizard-tabs) .nav-link.active .nav-icon,
.mcr-page-tabs:not(.mcr-record-wizard-tabs) .nav-link.show .nav-icon,
.mcr-page-tabs:not(.mcr-record-wizard-tabs) .nav-link.active .nav-title,
.mcr-page-tabs:not(.mcr-record-wizard-tabs) .nav-link.show .nav-title {
    color: inherit !important;
}

.mcr-tab-content > .tab-pane {
    padding-top: 0;
}

@media (max-width: 991.98px) {
    .mcr-page-tabs:not(.mcr-record-wizard-tabs) {
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .mcr-page-tabs:not(.mcr-record-wizard-tabs) .mcr-tab-item,
    .mcr-page-tabs:not(.mcr-record-wizard-tabs) .nav-item {
        min-width: calc(50% - 0.25rem);
        flex-basis: calc(50% - 0.25rem);
    }

    .mcr-page-tabs:not(.mcr-record-wizard-tabs) .nav-link {
        border-radius: 0.65rem !important;
    }
}

@media (max-width: 575.98px) {
    .mcr-page-tabs:not(.mcr-record-wizard-tabs) .mcr-tab-item,
    .mcr-page-tabs:not(.mcr-record-wizard-tabs) .nav-item {
        min-width: 100%;
        flex-basis: 100%;
    }
}


/* =========================================================
   Shared profile/media surfaces
   ========================================================= */
.mcr-profile-display-stack {
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
}

.mcr-bg-image {
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

.mcr-media-preview-empty {
    background-color: var(--bs-secondary-bg-subtle);
}

/* Keep the single clear button visible after a new image is selected.
   Metronic normally swaps remove -> cancel, but these profile editors use
   one clear action that should always delete back to the default image. */
.mcr-image-input-single-clear.image-input.image-input-changed [data-kt-image-input-action=remove] {
    display: flex;
}

.mcr-bg-image-shadow {
    box-shadow: 0 3px 5px #0000005e;
}

.mcr-document-report-path {
    display: block;
    min-height: 1.5rem;
    margin-bottom: 0.5rem;
}

::placeholder {
    text-transform: none;
}


/* =========================================================
   Shared subtle surface helpers
   ========================================================= */
.mcr-surface-subtle {
    background-color: var(--bs-secondary-bg-subtle);
}

.mcr-surface-subtle .mcr-surface-title {
    color: var(--bs-body-color);
}


/* =========================================================
   Shared validation summary and table surfaces
   ========================================================= */
.mcr-validation-summary.mcr-summary-after-submit {
    margin-top: 1rem !important;
    margin-bottom: 0 !important;
}

.mcr-validation-summary.mcr-summary-after-submit ul {
    margin-bottom: 0;
    padding-left: 1.25rem;
}

.mcr-form-summary-slot {
    width: 100%;
    flex-basis: 100%;
    margin-top: 1rem;
}

.mcr-form-summary-slot > .mcr-validation-summary.mcr-summary-after-submit {
    margin-top: 0 !important;
    width: 100%;
}

div.dt-container {
    width: 100%;
}

div.dt-container > .dt-layout-row:not(.dt-layout-table),
div.dt-container > .row:not(.dt-layout-table) {
    margin-right: 0;
    margin-left: 0;
}

div.dt-container > .dt-layout-row:first-child,
div.dt-container > .row:first-child {
    padding-top: 1.25rem;
}

div.dt-container > .dt-layout-row:last-child,
div.dt-container > .row:last-child {
    padding-bottom: 1.25rem;
}

div.dt-container > .dt-layout-table,
div.dt-container > .dt-row {
    margin-right: 0;
    margin-left: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

div.dt-container > .dt-layout-table > .dt-layout-cell,
div.dt-container > .dt-row > .col-sm-12 {
    min-width: 100%;
}

div.dt-container div.dt-length,
div.dt-container div.dt-search,
div.dt-container div.dt-info,
div.dt-container div.dt-paging {
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
}

div.dt-container div.dt-paging ul.pagination {
    margin-bottom: 0;
}

div.dt-container div.dt-search input {
    max-width: 100%;
}

/* =========================================
   Additional Data editor
   ========================================= */
.mcr-additional-data-editor[data-read-only="true"] [data-mcr-additional-actions-column] {
    display: none;
}

.mcr-additional-data-editor[data-read-only="true"] .mcr-additional-name-input,
.mcr-additional-data-editor[data-read-only="true"] .mcr-additional-tags-input,
.mcr-additional-data-editor[data-read-only="true"] .tagify {
    width: 100%;
}

/* =========================================================
   Shared menu button resets
   ========================================================= */
.menu-item > button.menu-link,
.menu-item > form > button.menu-link {
    width: 100%;
    border: 0;
    background: transparent;
    text-align: left;
    appearance: none;
    cursor: pointer;
}