.container-fluid
{
    max-width: 2000px !important;

}



.connect-sorting {
    min-height: 500px;
    max-height: 500px; /* Set maximum height */ 
}

.connect-sorting-content {
    min-height: 400px;
    max-height: 400px; /* Set maximum height */
    overflow-y: auto; /* Enable vertical scrolling if content exceeds height */
    padding: 15px; /* Add padding for better spacing */ 
}


.table-container {
    max-height: 500px; /* Set the maximum height for the table body */
    overflow-y: auto; /* Enable vertical scrolling */
    overflow-x: auto; /* Prevent horizontal scrolling */
    position: relative; /* Ensure proper positioning for the table */
}

    .table-container thead th {
        position: sticky; /* Make the header sticky */
        top: 0; /* Stick the header to the top of the container */
        z-index: 1; /* Ensure the header stays above the body content */
        background-color: var(--bs-body-bg);
    }

.tdRadio {
    cursor: pointer;
}



.trRowListMaxHeight {
    max-height: 300px;
    overflow-y: auto;
}


/* === Sidebar detail alignment === */
.sidebarDetail .detail-row { /* whole line */
    display: flex; /* horizontal flow              */
    align-items: center; /* vertical centring            */
    gap: .5rem; /* space between every element  */
}

.sidebarDetail .detail-label { /* “Member:”, “Property:” …     */
    min-width: 110px; /* same width for every label   */
    font-weight: 600; /* make them stand out          */
}

.sidebarDetail .detail-value { /* the link itself              */
    flex: 1; /* take the remaining space     */
    word-break: break-word; /* wrap long e‑mails gracefully */
}




/* === Sidebar detail alignment === */
.mainDetail .detail-row { /* whole line */
    display: flex;
    align-items: flex-start; /* Align items to the top */
    gap: .5rem; /* Space between elements */
    margin-bottom: 10px;
}


.mainDetail .detail-label { /* “Member:”, “Property:” …     */
    min-width: 110px; /* same width for every label   */
    font-weight: 600; /* make them stand out          */
    vertical-align:top;
}

.mainDetail .detail-value { /* the link itself              */
    flex: 1; /* take the remaining space     */
    word-break: break-word; /* wrap long e‑mails gracefully */
}






.file-list-group {
    display: flex;
    flex-wrap: wrap;
    gap: 10px; /* Space between items */
    padding: 0;
    margin: 0; /* Reset margin */
    list-style: none; /* Remove default bullet points */
}

    .file-list-group .file-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        margin: 0; /* Reset margin */
    }

     

/* ======================================================
   Mobile Responsiveness (2.4.1)
   Fixes table overflow, form layout, card padding on small screens
   ====================================================== */

/* Make all card-body tables scroll horizontally on mobile */
@media (max-width: 767.98px) {

    /* Auto-wrap any bare table that is not already in a .table-responsive */
    .card-body > table,
    .card-body > form > table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Reduce card padding on mobile */
    .card-body {
        padding: 0.75rem;
    }

    /* Prevent text-nowrap breaking layout on narrow screens */
    .table th,
    .table td {
        white-space: normal !important;
        word-break: break-word;
    }

    /* Ensure body-wrapper does not clip */
    .body-wrapper {
        overflow-x: hidden;
    }

    /* Reduce button padding in table actions */
    .table .btn-sm {
        padding: 0.2rem 0.4rem;
        font-size: 0.75rem;
    }

    /* Admin topbar search - hide on very small screens */
    .search-bar {
        display: none;
    }

    /* Modal footer buttons wrap cleanly */
    .modal-footer {
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    /* Tab overflow scroll */
    .nav-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .nav-tabs .nav-link {
        white-space: nowrap;
    }

    /* Stat number text wrap */
    .display-6 {
        font-size: 1.5rem;
    }
}

/* Tablet (md) fixes */
@media (max-width: 991.98px) {

    /* Ensure DataTable search/info row wraps */
    .dataTables_wrapper .dataTables_filter,
    .dataTables_wrapper .dataTables_length {
        text-align: left;
        margin-bottom: 0.5rem;
    }
}

/* ======================================================
   UX Polish — Skeleton Loader & Loading States
   ====================================================== */

/* Skeleton pulse animation — used for KPI values while AJAX loads */
@keyframes skeleton-pulse {
    0%   { opacity: 1; }
    50%  { opacity: 0.4; }
    100% { opacity: 1; }
}

.kpi-loading {
    animation: skeleton-pulse 1.4s ease-in-out infinite;
    color: transparent !important;
    background: currentColor;
    border-radius: 4px;
    display: inline-block;
    min-width: 3rem;
    min-height: 1em;
    vertical-align: middle;
    pointer-events: none;
    user-select: none;
}

/* Skeleton block — replaces text content blocks while loading */
.skeleton-block {
    animation: skeleton-pulse 1.4s ease-in-out infinite;
    border-radius: 4px;
    display: block;
}

/* Adapt skeleton to dark and light themes */
[data-bs-theme="dark"] .skeleton-block,
[data-bs-theme="dark"] .kpi-loading {
    background: rgba(255,255,255,0.12);
}

[data-bs-theme="light"] .skeleton-block,
[data-bs-theme="light"] .kpi-loading {
    background: rgba(0,0,0,0.10);
}


/* ======================================================
   UX Polish — Empty State
   Consistent "no records found" display for tables/lists
   ====================================================== */

.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 1rem;
    text-align: center;
    color: var(--bs-secondary-color, #6c757d);
}

.empty-state .empty-state-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
    opacity: 0.4;
}

.empty-state h6 {
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.empty-state p {
    font-size: 0.875rem;
    margin-bottom: 0;
}


/* ======================================================
   UX Polish — Action Row (header buttons above tables)
   Consistent spacing for card-header action buttons
   ====================================================== */

.card-header-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.card-header-actions .ms-auto {
    margin-left: auto !important;
}


/* ======================================================
   UX Polish — Status Badge consistency
   ====================================================== */

.badge-status {
    font-size: 0.75rem;
    padding: 0.3em 0.65em;
    border-radius: 50rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    white-space: nowrap;
}


/* ======================================================
   UX Polish — Clickable card feedback
   ====================================================== */

.card[style*="cursor:pointer"],
.card[onclick] {
    transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.card[style*="cursor:pointer"]:hover,
.card[onclick]:hover {
    box-shadow: 0 4px 20px rgba(0,0,0,0.15) !important;
    transform: translateY(-2px);
}


/* ======================================================
   UX Polish — Form field hints
   ====================================================== */

.form-hint {
    font-size: 0.78rem;
    color: var(--bs-secondary-color, #6c757d);
    margin-top: 0.2rem;
    display: block;
}


/* ======================================================
   UX Polish — Sticky table header in modal
   ====================================================== */

.modal .table-container thead th {
    background-color: var(--bs-body-bg);
}


/* ======================================================
   Admin Sidebar — Single-Panel Expandable
   ====================================================== */

:root {
    --sb-width: 260px;
    --sb-collapsed-width: 64px;
    --sb-bg: var(--bs-body-bg, #fff);
    --sb-border: var(--bs-border-color, rgba(128,128,128,.15));
    --sb-text: var(--bs-body-color, #212529);
    --sb-muted: var(--bs-secondary-color, #6c757d);
    --sb-hover-bg: rgba(var(--bs-primary-rgb, 255,102,0), 0.08);
    --sb-active-bg: rgba(var(--bs-primary-rgb, 255,102,0), 0.12);
    --sb-active-border: var(--bs-primary, #ff6600);
    --sb-transition: 0.25s cubic-bezier(.4,0,.2,1);
}

/* Old theme sidebar hiding is scoped to body.admin-layout — see below */

/* ── Sidebar Container ── */
.admin-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    width: var(--sb-width);
    height: 100vh;
    background: var(--sb-bg);
    border-right: 1px solid var(--sb-border);
    display: flex;
    flex-direction: column;
    z-index: 1040;
    transition: width var(--sb-transition);
    overflow: hidden;
}

/* ── Header: logo + collapse button ── */
.sb-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px;
    min-height: 64px;
    border-bottom: 1px solid var(--sb-border);
    flex-shrink: 0;
}

.sb-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: var(--sb-text);
    overflow: hidden;
    white-space: nowrap;
}

.sb-logo-img {
    width: 36px;
    height: 36px;
    object-fit: contain;
    flex-shrink: 0;
    border-radius: 6px;
}

.sb-logo-text {
    font-weight: 700;
    font-size: 14px;
    opacity: 1;
    transition: opacity var(--sb-transition);
    overflow: hidden;
    text-overflow: ellipsis;
}

.sb-collapse-btn {
    background: none;
    border: none;
    color: var(--sb-muted);
    cursor: pointer;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    transition: all 0.15s;
    flex-shrink: 0;
}

.sb-collapse-btn:hover {
    background: var(--sb-hover-bg);
    color: var(--sb-active-border);
}

.sb-collapse-btn .ti {
    transition: transform var(--sb-transition);
    font-size: 18px;
}

/* ── Quick Search Bar ── */
.sb-search-wrap {
    padding: 4px 12px 8px;
    border-bottom: 1px solid var(--sb-border);
}
.sb-search-wrap .input-group-text {
    background: transparent;
    border-color: var(--sb-border);
    color: var(--sb-muted);
    padding: 4px 8px;
}
.sb-search-wrap .form-control {
    background: transparent;
    border-color: var(--sb-border);
    color: var(--sb-text);
    font-size: 12px;
}
.sb-search-wrap .form-control::placeholder { color: var(--sb-muted); opacity: 0.6; }

/* ── Scrollable Menu ── */
.sb-menu {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 8px 0;
    scrollbar-width: thin;
    scrollbar-color: rgba(128,128,128,.3) transparent;
}

.sb-menu::-webkit-scrollbar { width: 5px; }
.sb-menu::-webkit-scrollbar-track { background: transparent; }
.sb-menu::-webkit-scrollbar-thumb { background: rgba(128,128,128,.3); border-radius: 3px; }
.sb-menu::-webkit-scrollbar-thumb:hover { background: rgba(128,128,128,.5); }

.sb-nav {
    list-style: none;
    margin: 0;
    padding: 0 8px;
}

/* ── Section Cap (group header labels) ── */
.sb-section-cap {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: var(--sb-muted);
    padding: 16px 10px 4px;
    white-space: nowrap;
    overflow: hidden;
}

.sb-section-cap:first-child { padding-top: 8px; }

/* Sub-category label inside a group submenu */
.sb-sub-cap {
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--sb-muted);
    padding: 10px 10px 2px;
    white-space: nowrap;
    overflow: hidden;
    list-style: none;
    opacity: 0.7;
}

.sb-sub-cap:first-child { padding-top: 4px; }

/* ── Menu Item ── */
.sb-item { list-style: none; }

.sb-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 10px;
    margin: 1px 0;
    font-size: 13px;
    color: var(--sb-text);
    text-decoration: none;
    border-radius: 6px;
    transition: all 0.15s;
    white-space: nowrap;
    overflow: hidden;
    border-left: 3px solid transparent;
}

.sb-link iconify-icon,
.sb-link .ti {
    font-size: 18px;
    flex-shrink: 0;
    width: 22px;
    text-align: center;
}

.sb-link:hover {
    background: var(--sb-hover-bg);
    color: var(--sb-active-border);
}

.sb-link.active {
    background: var(--sb-active-bg);
    border-left-color: var(--sb-active-border);
    font-weight: 600;
    color: var(--sb-active-border);
}

/* ── Collapsible Group ── */
.sb-group { list-style: none; }

.sb-group-toggle {
    display: flex;
    align-items: center;
    gap: 0;
    padding: 6px 10px;
    margin: 1px 0;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--sb-muted);
    text-decoration: none;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
    overflow: hidden;
}

.sb-group-toggle .ti {
    font-size: 15px;
    flex-shrink: 0;
}

.sb-group-toggle:hover {
    color: var(--sb-active-border);
    background: var(--sb-hover-bg);
}

.sb-arrow {
    margin-left: auto;
    font-size: 14px !important;
    transition: transform 0.2s;
    width: auto !important;
}

.sb-group.collapsed .sb-arrow {
    transform: rotate(-90deg);
}

/* Submenu */
.sb-submenu {
    list-style: none;
    padding: 0 0 0 8px;
    margin: 0;
    overflow: hidden;
    max-height: 2000px;
    transition: max-height 0.3s ease;
}

.sb-group.collapsed .sb-submenu {
    max-height: 0;
}

.sb-submenu .sb-link {
    padding: 5px 10px 5px 12px;
    font-size: 13px;
}

/* ── Footer (Back to Member Area) ── */
.sb-footer {
    border-top: 1px solid var(--sb-border);
    padding: 8px;
    flex-shrink: 0;
}

.sb-footer .sb-link {
    font-size: 13px;
    font-weight: 600;
}

/* ── Mobile overlay ── */
.sb-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    z-index: 1039;
}

/* ======================================================
   Sidebar — Collapsed State (icon-only)
   ====================================================== */

.admin-sidebar.sb-collapsed {
    width: var(--sb-collapsed-width);
}

.admin-sidebar.sb-collapsed .sb-logo-text,
.admin-sidebar.sb-collapsed .sb-section-cap,
.admin-sidebar.sb-collapsed .sb-link span,
.admin-sidebar.sb-collapsed .sb-group-toggle span,
.admin-sidebar.sb-collapsed .sb-arrow {
    opacity: 0;
    width: 0;
    overflow: hidden;
    white-space: nowrap;
}

.admin-sidebar.sb-collapsed .sb-collapse-btn .ti {
    transform: rotate(180deg);
}

.admin-sidebar.sb-collapsed .sb-group-toggle {
    justify-content: center;
    padding: 8px 0;
}

.admin-sidebar.sb-collapsed .sb-group-toggle .ti:first-child {
    margin: 0;
}

.admin-sidebar.sb-collapsed .sb-link {
    justify-content: center;
    padding: 8px 0;
    border-left-color: transparent;
}

.admin-sidebar.sb-collapsed .sb-submenu {
    max-height: 0;
}

.admin-sidebar.sb-collapsed .sb-search-wrap {
    display: none;
}

.admin-sidebar.sb-collapsed .sb-header {
    justify-content: center;
    padding: 12px 8px;
}

/* Collapsed: hover on group shows flyout submenu */
.admin-sidebar.sb-collapsed .sb-group:hover > .sb-submenu {
    max-height: 2000px;
    position: absolute;
    left: var(--sb-collapsed-width);
    top: 0;
    min-width: 200px;
    background: var(--sb-bg);
    border: 1px solid var(--sb-border);
    border-radius: 0 6px 6px 0;
    box-shadow: 4px 4px 12px rgba(0,0,0,0.15);
    padding: 6px 0;
    z-index: 1050;
}

.admin-sidebar.sb-collapsed .sb-group {
    position: relative;
}

/* Flyout submenu items show their text labels */
.admin-sidebar.sb-collapsed .sb-group:hover > .sb-submenu .sb-link span {
    opacity: 1;
    width: auto;
}
.admin-sidebar.sb-collapsed .sb-group:hover > .sb-submenu .sb-link {
    justify-content: flex-start;
    padding: 7px 12px;
}

.admin-sidebar.sb-collapsed .sb-logo {
    justify-content: center;
}

/* Tooltip on collapsed items */
.admin-sidebar.sb-collapsed .sb-link[title],
.admin-sidebar.sb-collapsed .sb-group-toggle[title] {
    position: relative;
}

/* ======================================================
   Page content offset for sidebar
   ====================================================== */

/* Ensure the body itself follows the Bootstrap theme bg variables,
   so it doesn't flash white on pages where page-wrapper is shorter than
   the viewport (letting the body peek through). Bootstrap normally sets
   this via data-bs-theme on <html>, but app.min.js applies that attribute
   after first paint — the explicit rule here covers the gap. */
body.admin-layout,
body.member-layout {
    background: var(--bs-body-bg) !important;
    color: var(--bs-body-color);
}

/* Scoped to admin + member layouts — push page content right of sidebar */
body.admin-layout .page-wrapper,
body.member-layout .page-wrapper {
    margin-left: var(--sb-width) !important;
    transition: margin-left var(--sb-transition);
}

body.admin-layout.sb-is-collapsed .page-wrapper,
body.member-layout.sb-is-collapsed .page-wrapper {
    margin-left: var(--sb-collapsed-width) !important;
}

body.admin-layout .topbar,
body.member-layout .topbar {
    left: var(--sb-width) !important;
    width: calc(100% - var(--sb-width)) !important;
    transition: left var(--sb-transition), width var(--sb-transition);
}

body.admin-layout.sb-is-collapsed .topbar,
body.member-layout.sb-is-collapsed .topbar {
    left: var(--sb-collapsed-width) !important;
    width: calc(100% - var(--sb-collapsed-width)) !important;
}

/* Hide old iconbar in admin + member layouts */
body.admin-layout .side-mini-panel,
body.member-layout .side-mini-panel { width: 0 !important; min-width: 0 !important; display: block !important; }
body.admin-layout .side-mini-panel .iconbar,
body.admin-layout .side-mini-panel .sidebarmenu,
body.member-layout .side-mini-panel .iconbar,
body.member-layout .side-mini-panel .sidebarmenu { display: none !important; }

/* Body content area — reduce inner padding for tighter layout */
.body-wrapper > .container-fluid {
    padding: 15px 20px !important;
}

/* body-wrapper top margin — must clear the fixed topbar (theme default: 72px) */
.body-wrapper {
    margin-bottom: 12px !important;
    border-radius: 12px !important;
}

/* ======================================================
   Sidebar — Mobile (< 992px)
   ====================================================== */

@media (max-width: 991.98px) {
    .admin-sidebar {
        transform: translateX(-100%);
        width: var(--sb-width) !important;
    }

    .admin-sidebar.sb-mobile-open {
        transform: translateX(0);
    }

    .admin-sidebar.sb-mobile-open ~ .sb-overlay,
    .sb-overlay.show {
        display: block;
    }

    body.admin-layout .page-wrapper,
    body.member-layout .page-wrapper {
        margin-left: 0 !important;
    }

    body.admin-layout.sb-is-collapsed .page-wrapper,
    body.member-layout.sb-is-collapsed .page-wrapper {
        margin-left: 0 !important;
    }

    body.admin-layout .topbar,
    body.member-layout .topbar {
        left: 0 !important;
        width: 100% !important;
    }

    body.admin-layout.sb-is-collapsed .topbar,
    body.member-layout.sb-is-collapsed .topbar {
        left: 0 !important;
        width: 100% !important;
    }

    /* Hide collapsed state on mobile — always show full when open */
    .admin-sidebar.sb-collapsed {
        width: var(--sb-width) !important;
    }

    .admin-sidebar.sb-collapsed .sb-logo-text,
    .admin-sidebar.sb-collapsed .sb-section-cap,
    .admin-sidebar.sb-collapsed .sb-link span,
    .admin-sidebar.sb-collapsed .sb-group-toggle span,
    .admin-sidebar.sb-collapsed .sb-arrow {
        opacity: 1;
        width: auto;
    }

    .admin-sidebar.sb-collapsed .sb-link,
    .admin-sidebar.sb-collapsed .sb-group-toggle {
        justify-content: flex-start;
        padding: 7px 10px;
    }

    .admin-sidebar.sb-collapsed .sb-submenu {
        max-height: 2000px;
    }

    .admin-sidebar.sb-collapsed .sb-collapse-btn .ti {
        transform: none;
    }
}


/* ======================================================
   Search Modal — Dark Mode
   ====================================================== */

[data-bs-theme="dark"] #exampleModal .form-control {
    color: var(--bs-body-color);
    background-color: transparent;
}

[data-bs-theme="dark"] #exampleModal mark {
    background-color: rgba(255, 102, 0, 0.3);
    color: inherit;
}


/* ======================================================
   AI Chat Widget — Layout & Dark Mode
   ====================================================== */

.ai-chat-fab {
    position: fixed;
    bottom: 24px;
    right: 24px;
    width: 56px;
    height: 56px;
    z-index: 1050;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ai-chat-panel {
    display: none;
    position: fixed;
    bottom: 90px;
    right: 24px;
    width: 380px;
    max-width: calc(100vw - 48px);
    z-index: 1051;
}

.ai-chat-panel .card {
    border-radius: 12px;
    overflow: hidden;
}

.ai-chat-messages {
    height: 350px;
    overflow-y: auto;
}

.ai-chat-bubble {
    max-width: 85%;
}

/* Dark mode — AI chat bubbles */
[data-bs-theme="dark"] .ai-chat-bubble.bg-light {
    background-color: var(--bs-gray-800) !important;
    color: var(--bs-body-color);
}

[data-bs-theme="dark"] .ai-chat-bubble .text-muted {
    color: var(--bs-secondary-color) !important;
}


/* ======================================================
   Keyboard Shortcut Indicator
   ====================================================== */

#kb-prefix-indicator {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    padding: 8px 18px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    z-index: 10000;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s;
    background: var(--bs-body-bg);
    color: var(--bs-body-color);
    border: 1px solid var(--bs-border-color);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

#kb-prefix-indicator.show {
    opacity: 1;
}

#kbShortcutsModal kbd {
    background: var(--bs-tertiary-bg, #e9ecef);
    color: var(--bs-body-color);
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 13px;
    border: 1px solid var(--bs-border-color);
}


/* ======================================================
   Global AJAX Error Toast — 429 Rate Limit
   ====================================================== */

.rate-limit-toast {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 10000;
    min-width: 300px;
}

/* Stretched link table rows — makes entire row clickable via <a class="stretched-link"> in first cell */
.table-stretched-links tbody tr { position: relative; }
.table-stretched-links tbody tr a.stretched-link { color: inherit; text-decoration: none; }
.table-stretched-links tbody tr a.stretched-link::after { position: absolute; inset: 0; z-index: 1; content: ""; }
.table-stretched-links tbody tr:hover { background-color: var(--bs-tertiary-bg); }

/* ModeSell form styles */
.modesell-map { height: 350px; width: 100%; border-radius: 8px; }
.section-header { display: flex; align-items: center; gap: 8px; margin: 1.5rem 0 0.75rem; padding-bottom: 0.5rem; border-bottom: 1px solid var(--bs-border-color); }
.section-header h6 { margin: 0; font-weight: 600; }
.section-header i { color: var(--bs-primary); }

/* ── My Properties — Wizard Steps ── */
.mp-wizard-step { text-align: center; }
.mp-wizard-step-number {
    display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; border-radius: 50%;
    background: var(--bs-tertiary-bg); color: var(--bs-body-color);
    font-weight: 600; font-size: 14px; transition: all .2s;
}
.mp-wizard-step.active .mp-wizard-step-number,
.mp-wizard-step.done .mp-wizard-step-number { background: var(--bs-primary); color: #fff; }
.mp-wizard-step.done .mp-wizard-step-number::after { content: '\2713'; }
.mp-wizard-step-label { display: block; font-size: 12px; margin-top: 4px; color: var(--bs-secondary-color); }
.mp-wizard-step-line { flex: 1; height: 2px; background: var(--bs-border-color); align-self: center; margin: 0 12px; margin-bottom: 18px; }

/* ── My Properties — Property Cards ── */
.mp-property-card { border: 1px solid var(--bs-border-color); border-radius: 8px; padding: 16px; margin-bottom: 12px; transition: border-color .15s; }
.mp-property-card:hover { border-color: var(--bs-primary); }
.mp-property-card .mp-prop-address { font-weight: 600; margin-bottom: 2px; }
.mp-property-card .mp-prop-meta { font-size: 13px; color: var(--bs-secondary-color); }

/* Dark mode — portal uses [data-bs-theme="dark"] */
[data-bs-theme="dark"] .mp-wizard-step-number { background: rgba(255,255,255,.1); }
[data-bs-theme="dark"] .mp-property-card { border-color: rgba(255,255,255,.1); }
[data-bs-theme="dark"] .mp-property-card:hover { border-color: var(--bs-primary); }

/* ── Admin Page — Layout (pages without sub-sidebar like Property/Member) ── */
.admin-detail-wrapper { }

/* ── Member Detail — Layout ── */
.member-detail-wrapper { margin-top: 60px; }
.member-detail-sidebar { min-width: 220px; }
.member-detail-content { min-width: 0; }
.member-detail-avatar {
    width: 48px; height: 48px; font-size: 18px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%; flex-shrink: 0;
}

/* ── Member Detail — Sidebar Nav ── */
.md-sidebar-nav .md-nav-icon { width: 20px; text-align: center; flex-shrink: 0; }
.md-sidebar-nav .md-nav-link {
    display: flex; align-items: center; gap: 8px;
    padding: 7px 10px; border-radius: 6px;
    text-decoration: none; color: var(--bs-body-color);
    transition: background .15s, color .15s;
}
.md-sidebar-nav .md-nav-link:hover { background: var(--bs-tertiary-bg); }
.md-sidebar-nav .md-nav-link.active {
    background: rgba(var(--bs-primary-rgb), .12);
    color: var(--bs-primary); font-weight: 600;
}
.md-sidebar-nav .md-nav-section {
    font-size: 11px; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.5px; color: var(--bs-secondary-color);
    padding: 12px 12px 4px; margin-top: 4px;
}
.md-sidebar-nav .md-nav-section:first-child { margin-top: 0; padding-top: 8px; }

/* Dark mode */
[data-bs-theme="dark"] .md-sidebar-nav .md-nav-link:hover { background: rgba(255,255,255,.06); }
[data-bs-theme="dark"] .md-sidebar-nav .md-nav-link.active { background: rgba(var(--bs-primary-rgb), .18); }

/* ── Compliance modal scroll ── */
.compliance-modal-scroll { max-height: 500px; overflow-y: auto; }

/* ── Member Properties List ── */
.mp-list-table thead th { padding: 0.5rem 0.75rem; font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--bs-secondary-color); font-weight: 600; border-bottom-width: 2px; }
.mp-list-table tbody td { padding: 0.5rem 0.75rem; vertical-align: middle; }
.mp-list-table tbody tr { position: relative; cursor: pointer; }
.mp-list-table tbody tr:hover { background: var(--bs-tertiary-bg); }
.mp-list-table .mp-row-link { position: absolute; inset: 0; z-index: 1; }
.mp-filter-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.mp-filter-bar .form-select-sm { width: auto; min-width: 130px; max-width: 180px; font-size: 13px; }

/* Safari fix (2026-10): the theme (styles.css) sets "body .select2-container{display:inline}".
   Safari/WebKit measures an inline box as 0px wide, so Select2 drew its dropdown 0px wide and no
   option could be clicked (e.g. Task Type in Create Task). block keeps the full-width layout Chrome
   already drew (it ignored widths on the inline box) and gives WebKit a real width. */
body .select2-container { display: block; }