/**
 * MERIVA responsive foundation
 * Loaded last by layouts. Content-based breakpoints, not device names.
 * Does not relocate primary navigation (sidebar + hamburger stay LEFT).
 */

:root {
    --m-touch: 44px;
    --m-bp-stack: 36rem;
    --m-bp-split: 48rem;
    --m-bp-panel-shell: 62rem;
}

html {
    overflow-x: visible;
    overflow-wrap: break-word;
    word-break: normal;
}

body {
    overflow-x: visible;
    overflow-wrap: break-word;
    word-break: normal;
    hyphens: manual;
}

.m-break-token,
a[href^="http"],
a[href^="//"],
code,
kbd,
samp,
pre {
    overflow-wrap: anywhere;
    word-break: break-word;
}

.m-app-shell,
.m-app-container,
.m-app-main,
.m-app-header,
.v4-context,
.v4-pub-top,
.m-card,
.m-card-dark,
.row,
[class*="col-"] {
    min-width: 0;
    max-width: 100%;
}

.m-app-shell {
    width: 100%;
    overflow-x: visible;
}

.m-app-container,
.m-app-main {
    min-width: 0;
    width: 100%;
    max-width: 100%;
}

/* —— Buttons / controls —— */
.m-btn:not(.m-btn-icon),
a.m-btn:not(.m-btn-icon),
button.m-btn:not(.m-btn-icon),
input[type="submit"],
input[type="button"],
.btn:not(.btn-close):not(.btn-sm) {
    height: auto;
    min-height: var(--m-touch);
    max-width: 100%;
    white-space: normal;
    overflow-wrap: break-word;
    word-break: normal;
}

.m-btn-sm:not(.m-btn-icon),
.btn-sm:not(.btn-close) {
    min-height: var(--m-control-height-sm, 2.5rem);
    height: auto;
    white-space: normal;
}

@media (max-width: 47.98rem) {
    .m-btn-sm:not(.m-btn-icon),
    .btn-sm:not(.btn-close) {
        min-height: var(--m-touch);
    }
}

.m-btn-icon,
.v4-icon-btn,
.v4-user-trigger,
.m-app-header [data-m-toggle="sidebar"],
.v4-context [data-m-toggle="sidebar"],
.v4-pub-top [data-m-toggle="sidebar"] {
    flex: 0 0 auto;
    min-width: var(--m-touch);
    min-height: var(--m-touch);
}

.m-btn-group,
.m-panel-actions,
.d-flex:has(> .m-btn),
.v4-upload-actions,
.m-create-actions,
.mx-content-hero-cta,
.mx-esnaf-empty-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    min-width: 0;
    max-width: 100%;
}

.m-panel-actions {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 7.75rem), 1fr));
}

/* —— Forms —— */
input,
select,
textarea,
.m-input,
.m-select,
.form-control,
.form-select {
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

.v4-field-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.75rem;
}

@media (min-width: 36rem) {
    .v4-field-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.form-check-label,
.m-validation-feedback,
.field-validation-error,
.text-danger {
    overflow-wrap: break-word;
    word-break: normal;
    max-width: 100%;
}

/* —— Tables: internal scroll only —— */
.m-table-container,
.table-responsive,
.m-admin-users-table-wrap {
    overflow-x: auto;
    max-width: 100%;
    width: 100%;
    -webkit-overflow-scrolling: touch;
}

@media (max-width: 47.98rem) {
    .m-admin-users-table {
        min-width: 0;
    }

    .m-admin-users-table-wrap {
        display: none;
    }

    .m-admin-users-cards {
        display: grid;
    }
}

/* —— Member / public context bar: hamburger stays LEFT —— */
.v4-context {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem 0.85rem;
    min-width: 0;
}

.v4-context-copy {
    min-width: 0;
    flex: 1 1 10rem;
}

.v4-context-copy > .d-flex {
    min-width: 0;
}

.v4-context-copy [data-m-toggle="sidebar"] {
    order: 0;
}

.v4-context-title {
    overflow-wrap: break-word;
    word-break: normal;
    max-width: 100%;
}

.v4-city-chip {
    min-width: 0;
    max-width: min(14rem, 48vw);
}

.v4-city-chip span {
    flex: 1 1 auto;
    min-width: 0;
    overflow-wrap: break-word;
    word-break: normal;
    white-space: normal;
}

.v4-user-panel {
    max-width: min(18rem, calc(100vw - 1rem));
}

/* Public mobile topbar: hamburger LEFT, actions RIGHT */
.v4-pub-top {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    min-width: 0;
}

.v4-pub-top [data-m-toggle="sidebar"] {
    order: 0;
    margin-inline-end: 0;
}

.v4-pub-top-brand {
    min-width: 0;
}

.v4-pub-top > .m-btn {
    margin-inline-start: auto;
    flex: 0 1 auto;
    max-width: 42%;
}

/* Role panels: overlay drawer from LEFT, do not push main content */
.m-role-panel .m-app-header {
    height: auto;
    min-height: var(--meriva-header-height, 64px);
    flex-wrap: wrap;
    row-gap: 0.5rem;
}

.m-role-panel .d-flex,
.m-role-panel h1,
.m-role-panel h2,
.m-role-panel h3,
.m-role-panel .m-h1,
.m-role-panel .m-h2,
.m-role-panel .m-h3 {
    min-width: 0;
    max-width: 100%;
}

.m-role-panel h1,
.m-role-panel h2,
.m-role-panel h3,
.m-role-panel .m-h2,
.m-role-panel .m-h3,
.m-profile-hub__name,
.m-profile-hub__nick,
.m-profile-hub__bio,
.v4-context-title {
    overflow-wrap: break-word;
    word-break: normal;
}

.m-role-panel code,
.m-role-panel pre {
    max-width: 100%;
    overflow-wrap: anywhere;
    white-space: pre-wrap;
}

.m-role-panel .m-app-header > .d-flex:first-child {
    min-width: 0;
    flex: 1 1 12rem;
}

.m-role-panel .m-app-header > .d-flex:first-child [data-m-toggle="sidebar"] {
    order: 0;
    flex-shrink: 0;
}

.m-role-panel .m-app-header > .d-flex:last-child {
    margin-inline-start: auto;
    flex-wrap: wrap;
    justify-content: flex-end;
    min-width: 0;
}

@media (max-width: 991.98px) {
    body.m-role-panel .m-app-sidebar {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        height: 100dvh;
        width: min(var(--meriva-sidebar-width, 260px), 88vw);
        min-width: 0;
        max-width: min(var(--meriva-sidebar-width, 260px), 88vw);
        flex: none;
        transform: translateX(-105%);
        visibility: hidden;
        pointer-events: none;
        z-index: 1055;
        padding: var(--meriva-space-4, 1rem);
        padding-top: calc(var(--meriva-space-4, 1rem) + env(safe-area-inset-top, 0px));
    }

    body.m-role-panel .m-app-sidebar.show-mobile {
        transform: translateX(0);
        visibility: visible;
        pointer-events: auto;
    }

    body.m-role-panel .m-app-shell,
    body.m-role-panel .m-app-container {
        overflow-x: visible;
        transform: none;
    }

    body.m-role-panel.m-sidebar-open .m-app-container {
        transform: none;
        will-change: auto;
    }
}

/* V4 member/public shell: do not clip page overflow */
body.m-ui-v4 .m-app-shell,
body.m-ui-v4 .m-app-container {
    overflow-x: visible;
}

/* Chat: feed min-width, limited reply indent, composer in viewport */
.m-chat,
.m-chat-wrapper,
.m-chat-main,
.m-chat-feed,
.m-chat-row,
.m-chat-bubble,
.m-chat-bubble-text,
.m-chat-pin,
.m-chat-pin-text {
    min-width: 0;
    max-width: 100%;
}

.m-chat-bubble-text,
.m-chat-pin-text {
    overflow-wrap: break-word;
    word-break: normal;
}

.m-chat-header-title,
.m-chat-header-sub,
.m-chat-room-name,
.m-chat-nick,
.m-chat-name,
.m-chat-member-name,
.m-chat-reply-quote,
.m-chat-reply-excerpt {
    overflow-wrap: break-word;
    word-break: normal;
}

.m-chat-bubble-text a,
.m-chat-reply-excerpt a {
    overflow-wrap: anywhere;
}

@media (max-width: 63.98rem) {
    .mx-chat-shell--room .m-chat-row[data-reply-depth],
    .mx-chat-shell--room .m-chat-row[data-reply-depth="1"],
    .mx-chat-shell--room .m-chat-row[data-reply-depth="2"],
    .mx-chat-shell--room .m-chat-row[data-reply-depth="3"] {
        padding-left: 0.5rem;
    }
}

@media (max-width: 1099.98px) {
    body.m-chat-immersive.m-ui-v4:has(.v4-dock) .m-app-main {
        padding-bottom: var(--meriva-dock-h) !important;
    }
}

.m-chat-composer {
    padding-bottom: calc(0.75rem + env(safe-area-inset-bottom, 0px));
}

.m-chat-composer-row {
    flex-wrap: wrap;
}

.m-chat-composer textarea {
    overflow-wrap: break-word;
    min-width: 0;
}

.m-chat-send {
    min-height: var(--m-touch);
}

.modal-dialog,
.m-dialog-card,
.m-chat-report-dialog {
    max-width: min(100%, calc(100vw - 1.5rem));
}

.m-profile-hub,
.m-profile-edit,
.mx-esnaf,
.mx-content {
    min-width: 0;
    max-width: 100%;
    overflow-x: visible;
}

/* Admin dashboard: long action labels wrap inside the control.
   Narrow hero cards and quick-action cards stack to one column
   so a word stays intact instead of painting outside the tile. */
.m-role-panel .m-btn-label {
    min-width: 0;
    flex: 1 1 auto;
    white-space: normal;
    overflow-wrap: break-word;
    word-break: normal;
    line-height: 1.35;
    text-align: center;
}

.m-role-panel .m-hero-card-dark {
    container-type: inline-size;
    container-name: admin-hero;
}

.m-role-panel .m-hero-card-dark .m-panel-actions > .m-btn {
    min-width: 0;
    width: 100%;
    height: auto;
    align-self: stretch;
}

.m-role-panel .m-admin-quick-card {
    container-type: inline-size;
    container-name: admin-quick;
}

.m-role-panel .m-admin-quick-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem;
    min-width: 0;
    max-width: 100%;
}

.m-role-panel .m-admin-quick-actions > .m-btn {
    min-width: 0;
    width: 100%;
    max-width: 100%;
    height: auto;
    min-height: 44px;
    font-size: 0.75rem;
    padding-inline: 6px;
    white-space: normal;
    overflow: visible;
}

.m-role-panel .m-admin-quick-actions > .m-btn .m-btn-label {
    flex: 0 1 auto;
    overflow-wrap: normal;
    word-break: normal;
}

@container admin-hero (max-width: 36rem) {
    .m-role-panel .m-hero-card-dark .m-panel-actions {
        grid-template-columns: minmax(0, 1fr);
    }
}

@container admin-quick (max-width: 11.5rem) {
    .m-role-panel .m-admin-quick-actions {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Rounded description/chat cards: keep corner radius, do not clip first glyphs. */
.v4-mission,
.v4-event,
.v4-profile-card,
.v4-board-row,
.v4-ledger-item,
.v4-mp-hero,
.v4-comments,
.v4-content-panel,
.v4-composer-card,
.v4-post,
.m-chat-bubble {
    overflow: visible;
}

.v4-mission.v4-market-body,
.v4-event.v4-market-body,
.v4-mission .v4-market-body,
.v4-event .v4-market-body {
    padding: 1.05rem 1.2rem 1.15rem;
}

body.m-role-panel .m-app-shell {
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

@media (min-width: 992px) {
    body.m-role-panel .m-app-container {
        flex: 1 1 0%;
        width: 0;
        min-width: 0;
        max-width: calc(100vw - var(--meriva-sidebar-width, 260px));
    }
}

body.m-role-panel .m-app-main {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

body.m-role-panel .m-app-main > .row {
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
}

body.m-role-panel .m-hero-card-dark {
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    height: auto !important;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
}

body.m-role-panel .m-hero-card-dark > * {
    min-width: 0;
    max-width: 100%;
}

body.m-role-panel .m-hero-card-dark .m-panel-actions {
    position: relative !important;
    left: 0 !important;
    transform: none !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

body.m-role-panel .m-hero-card-dark .m-panel-actions > .m-btn {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box;
    white-space: normal;
}

body.m-role-panel .m-hero-card-dark .m-btn-label {
    min-width: 0;
    overflow-wrap: anywhere;
    white-space: normal;
}

.m-legal-site-footer {
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    font-size: 0.85rem;
    line-height: 1.45;
}

.m-legal-site-footer p,
.m-legal-site-footer nav {
    margin: 0 0 0.35rem;
    overflow-wrap: anywhere;
}

.m-legal-site-footer nav {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 0.85rem;
}

.m-legal-scroll {
    max-width: 100%;
    overflow-x: auto;
}

.m-legal-body,
.m-legal-prose pre {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    max-width: 100%;
}

.m-legal-flow {
    min-width: 0;
    max-width: 100%;
    overflow-x: clip;
}

.m-legal-flow h1,
.m-legal-flow h2,
.m-legal-flow h3,
.m-legal-flow h4,
.m-legal-flow p,
.m-legal-flow li {
    overflow-wrap: anywhere;
    white-space: normal;
    max-width: 100%;
}

.m-legal-flow h1 {
    font-size: 1.35rem;
    margin: 0 0 0.75rem;
}

.m-legal-flow h2 {
    font-size: 1.12rem;
    margin: 1.35rem 0 0.45rem;
}

.m-legal-flow h3,
.m-legal-flow h4 {
    font-size: 1rem;
    margin: 1rem 0 0.35rem;
}

.m-legal-flow p {
    margin: 0 0 0.75rem;
}

.m-legal-flow .m-legal-list {
    margin: 0 0 0.85rem;
    padding-left: 1.15rem;
    max-width: 100%;
}

.m-legal-flow .m-legal-letters {
    list-style: none;
    padding-left: 0;
}

.m-legal-flow .m-legal-list li {
    margin: 0 0 0.35rem;
}

@media (max-width: 767.98px) {
    .m-legal-prose,
    .m-legal-flow {
        min-width: 0;
        overflow-x: clip;
    }
}