/* =========================================================
   Market UI v2 - Compatibility Contract
   Path: public/assets/marketv2/core/compat.css

   Purpose:
   - Bring actively used legacy Market Blade markup into the V2 design contract.
   - Consume theme recipe/context variables only.
   - Avoid business logic, route logic, or hardcoded visual colors.
========================================================= */

.m-layout,
.m-auth-page {
    --m-compat-surface: var(--m-card-bg, var(--m-context-surface));
    --m-compat-surface-soft: var(--m-card-bg-soft, var(--m-context-surface-soft));
    --m-compat-surface-raised: var(--m-card-bg-raised, var(--m-context-surface-raised));
    --m-compat-surface-hover: var(--m-context-surface-hover);
    --m-compat-border: var(--m-card-border, var(--m-context-border));
    --m-compat-border-subtle: var(--m-context-border-subtle);
    --m-compat-border-strong: var(--m-context-border-strong);
    --m-compat-text: var(--m-context-text);
    --m-compat-text-strong: var(--m-context-text-strong);
    --m-compat-text-soft: var(--m-context-text-soft);
    --m-compat-text-muted: var(--m-context-text-muted);
    --m-compat-accent: var(--m-context-accent-color, var(--m-context-accent));
    --m-compat-accent-soft: var(--m-context-accent-soft);
    --m-compat-focus: var(--m-context-focus-ring);
    --m-compat-radius: var(--m-card-radius, var(--m-radius-lg));
    --m-compat-radius-sm: var(--m-radius-sm);
    --m-compat-shadow: var(--m-card-shadow, var(--m-context-shadow-panel));
    --m-compat-shadow-hover: var(--m-card-shadow-hover, var(--m-context-shadow-hover));
    --m-compat-control-height: var(--m-control-height-md, var(--m-button-height-md, 42px));
    --m-compat-control-radius: var(--m-control-radius, var(--m-radius-md));
    --m-compat-control-padding-x: var(--m-control-padding-x, var(--m-space-4));
    --m-compat-panel-gap: var(--m-page-section-gap, var(--m-space-5));
}

.m-v2-compat-page,
.m-v2-compat-panel {
    display: grid;
    gap: var(--m-compat-panel-gap);
    min-width: 0;
}

.m-v2-compat-panel :where(.row) {
    row-gap: var(--m-compat-panel-gap);
}

.m-layout :where(.page-title, .page-title-box h1, .page-title-box h2, .page-title-box h3, .page-title-box h4):not(.m-page-header__title),
.m-auth-page :where(.page-title, .page-title-box h1, .page-title-box h2, .page-title-box h3, .page-title-box h4):not(.m-page-header__title) {
    margin: 0;
    color: var(--m-compat-text-strong);
    font-size: var(--m-page-header-title-size, 1.5rem);
    font-weight: var(--m-page-header-title-weight, 820);
    line-height: 1.18;
    letter-spacing: 0;
}

.m-layout :where(.page-title-box, .page-header, .card-header):not(.m-card__header):not(.m-modal-shell__header),
.m-auth-page :where(.page-title-box, .page-header, .card-header):not(.m-card__header):not(.m-modal-shell__header) {
    min-width: 0;
}

.m-layout :where(.page-title-box):not(.m-page-header) {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--m-space-4);
    margin-block-end: var(--m-space-4);
    padding: var(--m-card-padding-y) var(--m-card-padding-x);
    border: 1px solid var(--m-compat-border);
    border-radius: var(--m-compat-radius);
    background: var(--m-compat-surface);
    color: var(--m-compat-text);
    box-shadow: var(--m-compat-shadow);
}

.m-layout :where(.breadcrumb) {
    margin: 0;
    color: var(--m-compat-text-soft);
}

.m-layout :where(.m-content__inner > form:not(.m-action-menu__form):not(.m-dropdown__form), .filter-form, .search-form, .filter-card, .filter-box):not(.m-filters-panel):not(.m-card),
.m-auth-page :where(.m-content__inner > form:not(.m-action-menu__form):not(.m-dropdown__form), .filter-form, .search-form, .filter-card, .filter-box):not(.m-filters-panel):not(.m-card) {
    display: grid;
    gap: var(--m-filters-panel-grid-gap-y, var(--m-space-4)) var(--m-filters-panel-grid-gap-x, var(--m-space-4));
    margin-block-end: var(--m-compat-panel-gap);
    padding: var(--m-card-padding-y) var(--m-card-padding-x);
    border: 1px solid var(--m-compat-border);
    border-radius: var(--m-compat-radius);
    background: var(--m-compat-surface);
    color: var(--m-compat-text);
    box-shadow: var(--m-compat-shadow);
}

.m-layout :where(.card):not(.m-card),
.m-auth-page :where(.card):not(.m-card) {
    min-width: 0;
    border: 1px solid var(--m-compat-border);
    border-radius: var(--m-compat-radius);
    background: var(--m-compat-surface);
    color: var(--m-compat-text);
    box-shadow: var(--m-compat-shadow);
    overflow: hidden;
}

.m-layout :where(.card):not(.m-card):hover,
.m-auth-page :where(.card):not(.m-card):hover {
    border-color: var(--m-compat-border-strong);
    box-shadow: var(--m-compat-shadow-hover);
}

.m-layout :where(.card-header):not(.m-card__header),
.m-auth-page :where(.card-header):not(.m-card__header) {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--m-space-3);
    padding: var(--m-card-header-padding-y, var(--m-space-4)) var(--m-card-padding-x);
    border-block-end: 1px solid var(--m-compat-border-subtle);
    background: var(--m-card-header-bg, var(--m-compat-surface-raised));
    color: var(--m-compat-text-strong);
    font-weight: 800;
}

.m-layout :where(.card-body):not(.m-card__body),
.m-auth-page :where(.card-body):not(.m-card__body) {
    padding: var(--m-card-padding-y) var(--m-card-padding-x);
    color: var(--m-compat-text);
}

.m-layout :where(.card-footer):not(.m-card__footer),
.m-auth-page :where(.card-footer):not(.m-card__footer) {
    padding: var(--m-card-footer-padding-y, var(--m-space-4)) var(--m-card-padding-x);
    border-block-start: 1px solid var(--m-compat-border-subtle);
    background: var(--m-card-footer-bg, var(--m-compat-surface-raised));
}

.m-layout :where(.table-responsive):not(.m-table-responsive),
.m-auth-page :where(.table-responsive):not(.m-table-responsive) {
    width: 100%;
    margin-block: var(--m-space-4);
    border: 1px solid var(--m-table-border, var(--m-compat-border));
    border-radius: var(--m-table-radius, var(--m-compat-radius));
    background: var(--m-table-bg, var(--m-compat-surface));
    box-shadow: var(--m-table-shadow, var(--m-compat-shadow));
    overflow: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--m-table-scrollbar-thumb, var(--m-compat-border-strong)) transparent;
}

.m-layout :where(table.table):not(.m-table),
.m-auth-page :where(table.table):not(.m-table) {
    width: 100%;
    margin: 0;
    border-collapse: separate;
    border-spacing: 0;
    background: var(--m-table-bg, var(--m-compat-surface));
    color: var(--m-table-text, var(--m-compat-text));
    font-size: var(--m-table-font-size, 0.875rem);
}

.m-layout :where(table.table):not(.m-table) :where(th),
.m-auth-page :where(table.table):not(.m-table) :where(th) {
    min-height: var(--m-table-header-height, 44px);
    padding: var(--m-table-cell-padding-y, var(--m-space-3)) var(--m-table-cell-padding-x, var(--m-space-4));
    border-block-end: 1px solid var(--m-table-header-border, var(--m-compat-border));
    background: var(--m-table-header-bg, var(--m-compat-surface-raised));
    color: var(--m-table-header-text, var(--m-compat-text-strong));
    font-size: var(--m-table-header-font-size, 0.8125rem);
    font-weight: var(--m-table-header-font-weight, 780);
    line-height: 1.35;
    vertical-align: middle;
    white-space: nowrap;
}

.m-layout :where(table.table):not(.m-table) :where(td),
.m-auth-page :where(table.table):not(.m-table) :where(td) {
    min-height: var(--m-table-row-height, 52px);
    padding: var(--m-table-cell-padding-y, var(--m-space-3)) var(--m-table-cell-padding-x, var(--m-space-4));
    border-block-end: 1px solid var(--m-table-row-border, var(--m-compat-border-subtle));
    background: var(--m-table-row-bg, transparent);
    color: var(--m-table-text, var(--m-compat-text));
    line-height: 1.45;
    vertical-align: middle;
}

.m-layout :where(table.table):not(.m-table) :where(tbody tr:hover td),
.m-auth-page :where(table.table):not(.m-table) :where(tbody tr:hover td) {
    background: var(--m-table-row-hover-bg, var(--m-compat-surface-hover));
}

.m-layout :where(.form-control, .form-select, select.form-control, textarea.form-control):not(.m-control):not(.m-select__native),
.m-auth-page :where(.form-control, .form-select, select.form-control, textarea.form-control):not(.m-control):not(.m-select__native) {
    min-height: var(--m-compat-control-height);
    width: 100%;
    padding-inline: var(--m-compat-control-padding-x);
    border: 1px solid var(--m-control-border, var(--m-compat-border));
    border-radius: var(--m-compat-control-radius);
    background: var(--m-control-bg, var(--m-compat-surface));
    color: var(--m-control-text, var(--m-compat-text));
    box-shadow: var(--m-control-shadow, none);
    outline: none;
}

.m-layout :where(.form-control, .form-select):not(.m-control):focus,
.m-auth-page :where(.form-control, .form-select):not(.m-control):focus {
    border-color: var(--m-control-border-focus, var(--m-compat-accent));
    box-shadow: var(--m-control-focus-ring, 0 0 0 3px var(--m-compat-focus));
}

.m-layout :where(label, .form-label):not(.m-field__label),
.m-auth-page :where(label, .form-label):not(.m-field__label) {
    color: var(--m-compat-text-strong);
    font-size: var(--m-field-label-font-size, 0.8125rem);
    font-weight: var(--m-field-label-font-weight, 720);
    line-height: 1.35;
}

.m-layout :where(.form-group, .mb-3):has(> label, > .form-label),
.m-auth-page :where(.form-group, .mb-3):has(> label, > .form-label) {
    display: grid;
    gap: var(--m-field-gap, var(--m-space-2));
}

.m-layout :where(.select2-container--default .select2-selection--single, .select2-container--default .select2-selection--multiple),
.m-auth-page :where(.select2-container--default .select2-selection--single, .select2-container--default .select2-selection--multiple) {
    min-height: var(--m-compat-control-height);
    border: 1px solid var(--m-control-border, var(--m-compat-border));
    border-radius: var(--m-compat-control-radius);
    background: var(--m-control-bg, var(--m-compat-surface));
    color: var(--m-control-text, var(--m-compat-text));
}

.m-layout :where(.btn):not(.m-btn),
.m-auth-page :where(.btn):not(.m-btn) {
    min-height: var(--m-button-height-md, 40px);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--m-button-gap, var(--m-space-2));
    padding-inline: var(--m-button-padding-x-md, var(--m-space-4));
    border: 1px solid var(--m-button-border, var(--m-compat-border));
    border-radius: var(--m-button-radius-md, var(--m-compat-control-radius));
    background: var(--m-button-bg, var(--m-compat-surface));
    color: var(--m-button-text, var(--m-compat-text-strong));
    box-shadow: var(--m-button-shadow, none);
    font-weight: var(--m-button-font-weight, 740);
    line-height: 1.2;
    text-decoration: none;
}

.m-layout :where(.btn):not(.m-btn):hover,
.m-auth-page :where(.btn):not(.m-btn):hover {
    border-color: var(--m-button-border-hover, var(--m-compat-border-strong));
    background: var(--m-button-bg-hover, var(--m-compat-surface-hover));
    color: var(--m-button-text-hover, var(--m-compat-text-strong));
}

.m-layout :where(.btn-primary, .btn-success, .btn--primary, .btn--success):not(.m-btn),
.m-auth-page :where(.btn-primary, .btn-success, .btn--primary, .btn--success):not(.m-btn) {
    border-color: var(--m-button-primary-border, var(--m-compat-accent));
    background: var(--m-button-primary-bg, var(--m-compat-accent));
    color: var(--m-button-primary-text, var(--m-context-accent-text-inverse));
}

.m-layout :where([class*="btn-outline--"], .btn-outline-primary, .btn-outline-secondary):not(.m-btn),
.m-auth-page :where([class*="btn-outline--"], .btn-outline-primary, .btn-outline-secondary):not(.m-btn) {
    border-color: var(--m-button-outline-border, var(--m-compat-border-strong));
    background: var(--m-button-outline-bg, transparent);
    color: var(--m-button-outline-text, var(--m-compat-text-strong));
}

.m-layout :where([class*="btn-outline--"], .btn-outline-primary, .btn-outline-secondary):not(.m-btn):hover,
.m-auth-page :where([class*="btn-outline--"], .btn-outline-primary, .btn-outline-secondary):not(.m-btn):hover {
    border-color: var(--m-button-outline-hover-border, var(--m-compat-accent));
    background: var(--m-button-outline-hover-bg, var(--m-compat-accent-soft));
    color: var(--m-button-outline-hover-text, var(--m-compat-text-strong));
}

.m-layout :where(.btn-sm):not(.m-btn),
.m-auth-page :where(.btn-sm):not(.m-btn) {
    min-height: var(--m-button-height-sm, 34px);
    padding-inline: var(--m-button-padding-x-sm, var(--m-space-3));
    font-size: var(--m-button-font-size-sm, 0.8125rem);
}

.m-layout :where(.badge):not(.m-badge):not(.m-sidebar__badge),
.m-auth-page :where(.badge):not(.m-badge) {
    min-height: var(--m-badge-height, 24px);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding-inline: var(--m-badge-padding-x, var(--m-space-3));
    border: 1px solid var(--m-badge-border, var(--m-compat-border));
    border-radius: var(--m-badge-radius, 999px);
    background: var(--m-badge-bg, var(--m-compat-accent-soft));
    color: var(--m-badge-text, var(--m-compat-text-strong));
    font-size: var(--m-badge-font-size, 0.75rem);
    font-weight: var(--m-badge-font-weight, 760);
    line-height: 1;
}

.m-layout :where([class*="badge--"]):not(.m-badge):not(.m-sidebar__badge),
.m-auth-page :where([class*="badge--"]):not(.m-badge) {
    background: var(--m-badge-bg, var(--m-compat-accent-soft));
    border-color: var(--m-badge-border, var(--m-compat-border));
    color: var(--m-badge-text, var(--m-compat-text-strong));
}

.m-layout :where(.form-check),
.m-auth-page :where(.form-check) {
    display: inline-flex;
    align-items: center;
    gap: var(--m-choice-gap, var(--m-space-2));
    min-height: 34px;
    margin: 0;
}

.m-layout :where(.form-check-input),
.m-auth-page :where(.form-check-input) {
    width: var(--m-choice-box-size, 18px);
    height: var(--m-choice-box-size, 18px);
    margin: 0;
    border: 1px solid var(--m-choice-border, var(--m-compat-border));
    background: var(--m-choice-bg, var(--m-compat-surface));
}

.m-layout :where(.form-check-input):focus,
.m-auth-page :where(.form-check-input):focus {
    border-color: var(--m-choice-focus-border, var(--m-compat-accent));
    box-shadow: var(--m-choice-focus-ring, 0 0 0 3px var(--m-compat-focus));
}

.m-layout :where(.form-check-label),
.m-auth-page :where(.form-check-label) {
    color: var(--m-choice-label-text, var(--m-compat-text));
    font-size: var(--m-choice-label-size, 0.875rem);
    font-weight: var(--m-choice-label-weight, 640);
}

.m-layout :where(.alert):not(.m-alert),
.m-auth-page :where(.alert):not(.m-alert) {
    border: var(--m-alert-border-width, 1px) solid var(--m-alert-border-color, var(--m-compat-border));
    border-radius: var(--m-alert-radius, var(--m-compat-radius));
    background: var(--m-alert-bg, var(--m-compat-surface-raised));
    color: var(--m-alert-color, var(--m-compat-text));
    box-shadow: var(--m-alert-shadow, none);
}

.m-layout :where(.dropdown-menu):not(.m-dropdown-menu):not(.m-topbar__dropdown-menu),
.m-auth-page :where(.dropdown-menu):not(.m-dropdown-menu) {
    padding: var(--m-dropdown-padding);
    border: 1px solid var(--m-dropdown-border, var(--m-compat-border));
    border-radius: var(--m-dropdown-radius, var(--m-compat-radius));
    background: var(--m-dropdown-bg, var(--m-compat-surface));
    color: var(--m-dropdown-text, var(--m-compat-text));
    box-shadow: var(--m-dropdown-shadow, var(--m-compat-shadow-hover));
}

.m-layout :where(.dropdown-item):not(.m-dropdown-item):not(.m-dropdown-menu__item),
.m-auth-page :where(.dropdown-item):not(.m-dropdown-item) {
    min-height: var(--m-dropdown-item-height, 38px);
    display: flex;
    align-items: center;
    gap: var(--m-dropdown-item-gap, var(--m-space-2));
    color: inherit;
    border-radius: var(--m-dropdown-item-radius, var(--m-compat-radius-sm));
}

.m-layout :where(.dropdown-item):not(.m-dropdown-item):hover,
.m-auth-page :where(.dropdown-item):not(.m-dropdown-item):hover {
    background: var(--m-dropdown-hover-bg, var(--m-compat-surface-hover));
    color: var(--m-dropdown-hover-text, var(--m-compat-text-strong));
}

.m-layout :where(.pagination):not(.m-pagination),
.m-auth-page :where(.pagination):not(.m-pagination) {
    display: flex;
    flex-wrap: wrap;
    gap: var(--m-pagination-gap, var(--m-space-2));
    margin-block: var(--m-space-4) 0;
}

.m-layout :where(.page-link):not(.m-pagination__item),
.m-auth-page :where(.page-link):not(.m-pagination__item) {
    min-width: var(--m-pagination-item-size, 38px);
    min-height: var(--m-pagination-item-size, 38px);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--m-pagination-border, var(--m-compat-border));
    border-radius: var(--m-pagination-radius, var(--m-compat-control-radius));
    background: var(--m-pagination-bg, var(--m-compat-surface));
    color: var(--m-pagination-text, var(--m-compat-text));
    box-shadow: var(--m-pagination-shadow, none);
}

.m-layout :where(.page-item.active .page-link):not(.m-pagination__item),
.m-auth-page :where(.page-item.active .page-link):not(.m-pagination__item) {
    border-color: var(--m-pagination-active-border, var(--m-compat-accent));
    background: var(--m-pagination-active-bg, var(--m-compat-accent));
    color: var(--m-pagination-active-text, var(--m-context-accent-text-inverse));
}

.m-layout :where(.modal-content):not(.m-modal-shell),
.m-auth-page :where(.modal-content):not(.m-modal-shell) {
    border: 1px solid var(--m-modal-border, var(--m-compat-border));
    border-radius: var(--m-modal-radius, var(--m-compat-radius));
    background: var(--m-modal-surface, var(--m-compat-surface));
    color: var(--m-modal-text, var(--m-compat-text));
    box-shadow: var(--m-modal-shadow, var(--m-compat-shadow-hover));
}

.m-layout :where(.modal-header):not(.m-modal-shell__header),
.m-auth-page :where(.modal-header):not(.m-modal-shell__header) {
    border-block-end: 1px solid var(--m-modal-border-subtle, var(--m-compat-border-subtle));
    background: var(--m-modal-surface-raised, var(--m-compat-surface-raised));
}

.m-layout :where(.modal-footer):not(.m-modal-shell__footer),
.m-auth-page :where(.modal-footer):not(.m-modal-shell__footer) {
    border-block-start: 1px solid var(--m-modal-border-subtle, var(--m-compat-border-subtle));
    background: var(--m-modal-surface-raised, var(--m-compat-surface-raised));
}

.m-layout :where(.modal-title),
.m-auth-page :where(.modal-title) {
    color: var(--m-modal-text-strong, var(--m-compat-text-strong));
    font-weight: var(--m-modal-title-font-weight, 820);
}

.m-layout :where(.modal .close, .modal .btn-close):not(.m-modal-shell__close),
.m-auth-page :where(.modal .close, .modal .btn-close):not(.m-modal-shell__close) {
    min-width: var(--m-modal-close-size, 38px);
    min-height: var(--m-modal-close-size, 38px);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--m-modal-border-subtle, var(--m-compat-border));
    border-radius: var(--m-modal-close-radius, var(--m-compat-control-radius));
    background: var(--m-modal-surface, var(--m-compat-surface));
    color: var(--m-modal-text, var(--m-compat-text));
}

.m-layout :where(.nav-tabs):not(.m-tabs__list),
.m-auth-page :where(.nav-tabs):not(.m-tabs__list) {
    display: flex;
    flex-wrap: wrap;
    gap: var(--m-tabs-gap, var(--m-space-2));
    padding: var(--m-tabs-list-padding, var(--m-space-2));
    border: 1px solid var(--m-tabs-list-border, var(--m-compat-border));
    border-radius: var(--m-tabs-list-radius, var(--m-compat-radius));
    background: var(--m-tabs-list-bg, var(--m-compat-surface-raised));
}

.m-layout :where(.nav-tabs .nav-link):not(.m-tabs__trigger),
.m-auth-page :where(.nav-tabs .nav-link):not(.m-tabs__trigger) {
    min-height: var(--m-tabs-trigger-height, 38px);
    display: inline-flex;
    align-items: center;
    border: 1px solid transparent;
    border-radius: var(--m-tabs-trigger-radius, var(--m-compat-control-radius));
    color: var(--m-tabs-trigger-text, var(--m-compat-text-soft));
}

.m-layout :where(.nav-tabs .nav-link.active):not(.m-tabs__trigger),
.m-auth-page :where(.nav-tabs .nav-link.active):not(.m-tabs__trigger) {
    border-color: var(--m-tabs-trigger-active-border, var(--m-compat-border));
    background: var(--m-tabs-trigger-active-bg, var(--m-compat-surface));
    color: var(--m-tabs-trigger-active-text, var(--m-compat-text-strong));
}

.m-layout :where(.text-muted, small, .small):not(.m-helper__bubble),
.m-auth-page :where(.text-muted, small, .small):not(.m-helper__bubble) {
    color: var(--m-compat-text-muted) !important;
}

@media (max-width: 767.98px) {
    .m-layout,
    .m-auth-page {
        --m-compat-control-height: 44px;
    }

    .m-layout :where(.page-title-box):not(.m-page-header) {
        flex-direction: column;
        align-items: stretch;
        padding-inline: var(--layout-content-padding-inline-mobile, var(--m-space-4));
    }

    .m-layout :where(.m-content__inner > form:not(.m-action-menu__form):not(.m-dropdown__form), .filter-form, .search-form, .filter-card, .filter-box):not(.m-filters-panel):not(.m-card),
    .m-auth-page :where(.m-content__inner > form:not(.m-action-menu__form):not(.m-dropdown__form), .filter-form, .search-form, .filter-card, .filter-box):not(.m-filters-panel):not(.m-card) {
        padding: var(--m-space-4);
    }

    .m-layout :where(.card-body):not(.m-card__body),
    .m-auth-page :where(.card-body):not(.m-card__body) {
        padding: var(--m-space-4);
    }

    .m-layout :where(table.table):not(.m-table) :where(th, td),
    .m-auth-page :where(table.table):not(.m-table) :where(th, td) {
        padding: var(--m-space-3);
    }

    .m-layout :where(.btn):not(.m-btn),
    .m-auth-page :where(.btn):not(.m-btn),
    .m-layout :where(.dropdown-item):not(.m-dropdown-item):not(.m-dropdown-menu__item),
    .m-auth-page :where(.dropdown-item):not(.m-dropdown-item),
    .m-layout :where(.page-link):not(.m-pagination__item),
    .m-auth-page :where(.page-link):not(.m-pagination__item),
    .m-layout :where(.nav-tabs .nav-link):not(.m-tabs__trigger),
    .m-auth-page :where(.nav-tabs .nav-link):not(.m-tabs__trigger) {
        min-height: 44px;
    }
}

/* =========================================================
   Broad V2 adoption for active legacy Market views
   ---------------------------------------------------------
   These rules intentionally consume only recipe/context vars.
   They make old Blade markup visually compatible while the
   page files are migrated incrementally to explicit V2 parts.
========================================================= */

.m-layout :where(.m-v2-compat-panel > .row, .m-content__inner > .row):not(.m-stat-grid),
.m-auth-page :where(.m-v2-compat-panel > .row, .m-content__inner > .row):not(.m-stat-grid) {
    row-gap: var(--m-compat-panel-gap);
}

.m-layout :where(.m-v2-compat-panel > .row > [class*="col-"], .m-content__inner > .row > [class*="col-"]),
.m-auth-page :where(.m-v2-compat-panel > .row > [class*="col-"], .m-content__inner > .row > [class*="col-"]) {
    min-width: 0;
}

.m-layout :where(.card-title, .title, .box--title):not(.m-card__title):not(.m-stat-card__title),
.m-auth-page :where(.card-title, .title, .box--title):not(.m-card__title):not(.m-stat-card__title) {
    margin: 0;
    color: var(--m-compat-text-strong);
    font-size: var(--m-card-title-size, 0.95rem);
    font-weight: var(--m-card-title-weight, 820);
    line-height: 1.35;
    letter-spacing: 0;
}

.m-layout :where(.card-title.border-bottom, .border-bottom):not(.m-card__header):not(.m-table__row),
.m-auth-page :where(.card-title.border-bottom, .border-bottom):not(.m-card__header):not(.m-table__row) {
    border-color: var(--m-compat-border-subtle) !important;
}

.m-layout :where(.list-group):not(.m-list),
.m-auth-page :where(.list-group):not(.m-list) {
    border-radius: var(--m-compat-radius);
    overflow: hidden;
}

.m-layout :where(.list-group-item):not(.m-list__item),
.m-auth-page :where(.list-group-item):not(.m-list__item) {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--m-space-3);
    min-height: 48px;
    border-color: var(--m-compat-border-subtle);
    background: var(--m-compat-surface);
    color: var(--m-compat-text);
}

.m-layout :where(.list-group-item span, .list-group-item strong, .fw-bold),
.m-auth-page :where(.list-group-item span, .list-group-item strong, .fw-bold) {
    color: var(--m-compat-text-strong);
}

.m-layout :where(.bg--primary, .bg-primary),
.m-auth-page :where(.bg--primary, .bg-primary) {
    background: var(--m-compat-accent) !important;
    color: var(--m-context-accent-text-inverse) !important;
}

.m-layout :where(.text--white, .text-white),
.m-auth-page :where(.text--white, .text-white) {
    color: var(--m-context-accent-text-inverse) !important;
}

.m-layout :where(.text--primary, .text-primary, a),
.m-auth-page :where(.text--primary, .text-primary, a) {
    color: var(--m-compat-accent);
}

.m-layout :where(a):hover,
.m-auth-page :where(a):hover {
    color: var(--m-context-accent-color-hover, var(--m-compat-accent));
}

.m-layout :where(.input-group),
.m-auth-page :where(.input-group) {
    display: flex;
    align-items: stretch;
    width: 100%;
}

.m-layout :where(.input-group-text),
.m-auth-page :where(.input-group-text) {
    min-height: var(--m-compat-control-height);
    border: 1px solid var(--m-control-border, var(--m-compat-border));
    background: var(--m-control-addon-bg, var(--m-compat-surface-raised));
    color: var(--m-compat-text-soft);
}

.m-layout :where(.form-text, .help-block, .help-text, .hint-text),
.m-auth-page :where(.form-text, .help-block, .help-text, .hint-text) {
    margin: 0;
    color: var(--m-compat-text-muted);
    font-size: var(--m-field-help-font-size, 0.75rem);
    line-height: 1.5;
}

.m-layout :where(.invalid-feedback, .text--danger, .text-danger),
.m-auth-page :where(.invalid-feedback, .text--danger, .text-danger) {
    color: var(--m-context-danger-text, var(--m-slot-c4-text)) !important;
}

.m-layout :where(.valid-feedback, .text--success, .text-success),
.m-auth-page :where(.valid-feedback, .text--success, .text-success) {
    color: var(--m-context-success-text, var(--m-slot-c5-text)) !important;
}

.m-layout :where(.custom-control, .custom-switch),
.m-auth-page :where(.custom-control, .custom-switch) {
    min-height: 34px;
    display: inline-flex;
    align-items: center;
    gap: var(--m-space-2);
    color: var(--m-compat-text);
}

.m-layout :where(.avatar, .avatar--sm, .avatar--md, .avatar--lg),
.m-auth-page :where(.avatar, .avatar--sm, .avatar--md, .avatar--lg) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--m-compat-border);
    border-radius: var(--m-radius-full, 999px);
    background: var(--m-compat-surface-raised);
    color: var(--m-compat-text-soft);
    overflow: hidden;
}

.m-layout :where(.avatar img),
.m-auth-page :where(.avatar img) {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.m-layout :where(.empty-notification-list, .empty-state, .no-data),
.m-auth-page :where(.empty-notification-list, .empty-state, .no-data) {
    display: grid;
    justify-items: center;
    gap: var(--m-space-3);
    padding: clamp(var(--m-space-5), 5vw, var(--m-space-8));
    color: var(--m-compat-text-muted);
}

.m-layout :where(.empty-notification-list img, .empty-state img, .no-data img),
.m-auth-page :where(.empty-notification-list img, .empty-state img, .no-data img) {
    max-width: min(180px, 52vw);
    opacity: 0.78;
    filter: saturate(0.82);
}

.m-layout :where(.notify__area),
.m-auth-page :where(.notify__area) {
    display: grid;
    gap: var(--m-space-3);
}

.m-layout :where(.notify-item-wrapper),
.m-auth-page :where(.notify-item-wrapper) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--m-space-3);
    padding: var(--m-space-3);
    border: 1px solid var(--m-compat-border);
    border-radius: var(--m-compat-radius);
    background: var(--m-compat-surface);
    box-shadow: var(--m-compat-shadow);
}

.m-layout :where(.notify__item),
.m-auth-page :where(.notify__item) {
    min-width: 0;
    display: block;
    padding: var(--m-space-2);
    border-radius: var(--m-compat-control-radius);
    text-decoration: none;
    color: var(--m-compat-text);
}

.m-layout :where(.notify__item.unread--notification),
.m-auth-page :where(.notify__item.unread--notification) {
    background: var(--m-compat-accent-soft);
}

.m-layout :where(.notify__item .date),
.m-auth-page :where(.notify__item .date) {
    color: var(--m-compat-text-muted);
    font-size: 0.78rem;
}

.m-layout :where(.table--light):not(.m-table),
.m-auth-page :where(.table--light):not(.m-table) {
    --m-table-header-bg: var(--m-theme-table-header-bg, var(--m-compat-surface-raised));
    --m-table-header-text: var(--m-theme-table-header-text, var(--m-compat-text-strong));
    --m-table-row-border: var(--m-theme-table-row-border, var(--m-compat-border-subtle));
}

.m-layout :where(.table-responsive--sm, .table-responsive--md, .table-responsive--lg):not(.m-table-responsive),
.m-auth-page :where(.table-responsive--sm, .table-responsive--md, .table-responsive--lg):not(.m-table-responsive) {
    min-width: 0;
}

.m-layout :where(table.table):not(.m-table) :where(td, th) > :where(.btn, .badge, .dropdown) {
    vertical-align: middle;
}

.m-layout :where(table.table):not(.m-table) :where(td a.fw-bold, td .fw-bold) {
    color: var(--m-compat-text-strong);
}

.m-layout :where(.btn-group),
.m-auth-page :where(.btn-group) {
    display: inline-flex;
    gap: var(--m-space-2);
    flex-wrap: wrap;
}

.m-layout :where(.dropdown-toggle)::after,
.m-auth-page :where(.dropdown-toggle)::after {
    color: currentColor;
}

.m-layout :where(.show > .btn-outline--primary, .show > .btn-outline-primary),
.m-auth-page :where(.show > .btn-outline--primary, .show > .btn-outline-primary) {
    border-color: var(--m-compat-accent);
    background: var(--m-compat-accent-soft);
}

.m-layout :where(.m-v2-compat-panel .card + .card, .m-v2-compat-panel .table-responsive + .card, .m-v2-compat-panel .card + .table-responsive),
.m-auth-page :where(.m-v2-compat-panel .card + .card, .m-v2-compat-panel .table-responsive + .card, .m-v2-compat-panel .card + .table-responsive) {
    margin-block-start: var(--m-compat-panel-gap);
}

.m-layout :where(.m-v2-compat-panel .card .table-responsive):not(.m-table-responsive),
.m-auth-page :where(.m-v2-compat-panel .card .table-responsive):not(.m-table-responsive) {
    margin-block: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.m-layout :where(.m-v2-compat-panel .card .table-responsive table.table):not(.m-table),
.m-auth-page :where(.m-v2-compat-panel .card .table-responsive table.table):not(.m-table) {
    border-radius: 0;
}

.m-layout :where(.dataTables_wrapper),
.m-auth-page :where(.dataTables_wrapper) {
    display: grid;
    gap: var(--m-space-4);
}

.m-layout :where(.dataTables_filter, .dataTables_length),
.m-auth-page :where(.dataTables_filter, .dataTables_length) {
    color: var(--m-compat-text-soft);
}

.m-layout :where(.dataTables_filter input, .dataTables_length select),
.m-auth-page :where(.dataTables_filter input, .dataTables_length select) {
    min-height: var(--m-compat-control-height);
    border: 1px solid var(--m-control-border, var(--m-compat-border));
    border-radius: var(--m-compat-control-radius);
    background: var(--m-control-bg, var(--m-compat-surface));
    color: var(--m-control-text, var(--m-compat-text));
}

@media (max-width: 991.98px) {
    .m-layout :where(.m-v2-compat-panel > .row, .m-content__inner > .row):not(.m-stat-grid),
    .m-auth-page :where(.m-v2-compat-panel > .row, .m-content__inner > .row):not(.m-stat-grid) {
        row-gap: var(--m-space-4);
    }

    .m-layout :where(.m-v2-compat-panel > .row > [class*="col-"], .m-content__inner > .row > [class*="col-"]),
    .m-auth-page :where(.m-v2-compat-panel > .row > [class*="col-"], .m-content__inner > .row > [class*="col-"]) {
        margin-block-end: 0 !important;
    }
}

@media (max-width: 767.98px) {
    .m-layout :where(.notify-item-wrapper),
    .m-auth-page :where(.notify-item-wrapper) {
        grid-template-columns: minmax(0, 1fr);
    }

    .m-layout :where(.list-group-item):not(.m-list__item),
    .m-auth-page :where(.list-group-item):not(.m-list__item) {
        align-items: flex-start;
        min-height: 44px;
    }

    .m-layout :where(.m-v2-compat-panel .table-responsive):not(.m-table-responsive),
    .m-auth-page :where(.m-v2-compat-panel .table-responsive):not(.m-table-responsive) {
        margin-inline: calc(var(--m-space-2) * -1);
        width: calc(100% + var(--m-space-4));
        border-inline: 0;
        border-radius: var(--m-compat-radius-sm);
    }

    .m-layout :where(table.table):not(.m-table) {
        min-width: 680px;
    }
}