/* Phase 1 shared responsive contracts. Load after scoped CSS.
   Mobile <768px; tablet 768-1023px; desktop >=1024px. */
:root { --app-page-gutter: 2.25rem; --app-touch-size: 2.75rem; }
.app-shell, .app-main, .app-content { min-width: 0; max-width: 100%; }
.content.app-content {
    padding-inline: max(var(--app-page-gutter), env(safe-area-inset-left)) max(var(--app-page-gutter), env(safe-area-inset-right));
}
.app-content > *, .app-page-heading { min-width: 0; max-width: 100%; }
.app-page-header-layout { gap: 1.25rem; }
.app-page-title-row { gap: .75rem; }
.app-content :where(.card, .card-body, .app-table-card, .app-form-card, .transaction-card) { min-width: 0; }
.app-page-title-row > :not(h1) { flex-shrink: 0; max-width: 100%; }
.app-page-actions:empty { display: none; }

/* Opt-in form and filter layouts; Bootstrap col-md-* keeps its existing contract. */
.app-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.app-form-grid--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.app-form-grid > *, .report-filter-group-fields > * { min-width: 0; }
.app-form-grid-full { grid-column: 1 / -1; }
.app-filter-bar { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; min-width: 0; }
.app-filter-search { flex: 1 1 16rem; min-width: 0; }
.app-filter-tools { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }

/* Scroll the table region, not the document. Only explicitly marked tables get a new minimum. */
.app-table-scroll, .app-content .table-responsive, .app-content .overflow-x-auto {
    min-width: 0;
    max-width: 100%;
    width: 100%;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    contain: inline-size;
    -webkit-overflow-scrolling: touch;
}
.app-table-scroll { --app-table-min-width: 36rem; }
.app-table-scroll[data-table-kind="dense"] { --app-table-min-width: 60rem; }
.app-table-scroll[data-table-kind="transaction"] { --app-table-min-width: 48rem; }
.app-table-scroll[data-table-kind] > table { min-width: var(--app-table-min-width); }
.app-table-scroll:focus-visible { outline: 2px solid var(--app-accent); outline-offset: -2px; }
/* Sticky headers are opt-in and require a bounded scroll region. */
.app-table-scroll--bounded { max-height: 65dvh; overflow-y: auto; }
.app-table-scroll--bounded thead th { position: sticky; top: 0; z-index: 1; }

/* Keep modal headers/footers outside the body scroll area — every dialog now shares the single
   .app-modal-* system (Application-wide Modal Consistency Redesign task). */
:root :is(.app-modal-dialog, .product-details-dialog) {
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    max-width: 100%;
}
.app-modal-body {
    min-width: 0;
    min-height: 0;
    overflow: auto;
    overscroll-behavior: contain;
    scroll-padding-block: 1rem 8rem;
}
:root :is(.app-modal-header, .app-modal-footer) {
    flex-shrink: 0;
    min-width: 0;
}
.app-action-bar { position: sticky; bottom: 0; z-index: 8; display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: 1rem; background: var(--app-modal-surface); border-top: 1px solid var(--app-border); }
.app-action-buttons { display: flex; gap: .5rem; }
.app-action-bar, .transaction-action-bar, .product-form-actions { scroll-margin-block: 1rem; }

/* Mobile navigation remains a non-modal disclosure: normal Tab order, no focus trap. */
.nav-user-mobile { display: none; }
.nav-root[data-mobile-open="true"] .nav-scrollable { display: block; }
.navbar-toggler[aria-expanded="true"] { background-color: rgba(255,255,255,.18); }
@media (max-width: 1023.98px) {
    :root { --app-page-gutter: 1.5rem; }
    .app-form-grid--three { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .app-header { position: sticky; top: 0; }
    .nav-root .topnav-brand-row { flex-wrap: nowrap; gap: .65rem; min-height: 4rem; padding: .5rem max(1rem, env(safe-area-inset-left)); }
    .nav-root .navbar-brand { min-width: 0; margin-right: 0; }
    .nav-root .navbar-brand-copy { min-width: 0; }
    .nav-root .navbar-brand-copy strong { white-space: nowrap; }
    .nav-root .navbar-brand-copy small { display: none; }
    .nav-root .navbar-brand-logo { flex-shrink: 0; }
    .nav-root .nav-user-desktop { display: none; }
    .nav-root .navbar-toggler { min-width: var(--app-touch-size); min-height: var(--app-touch-size); flex-shrink: 0; }
    .nav-root .navbar-toggler { margin: 0; padding: 0; }
    .nav-root .nav-scrollable {
        max-height: calc(100vh - 4rem);
        max-height: calc(100dvh - 4rem - env(safe-area-inset-top));
        overflow-y: auto;
        overflow-x: hidden;
        overscroll-behavior: contain;
        padding-bottom: env(safe-area-inset-bottom);
        border-top: 1px solid rgba(255,255,255,.12);
    }
    .nav-root .nav-user-mobile { display: block; padding: .75rem 1rem; border-bottom: 1px solid rgba(255,255,255,.12); }
    .nav-user-mobile .app-user-area { flex-wrap: wrap; min-width: 0; }
    .nav-user-mobile .app-user-copy { flex: 1 1 8rem; min-width: 0; overflow-wrap: anywhere; }
    .nav-user-mobile .app-user-copy span, .nav-user-mobile .app-user-avatar { display: flex; }
    .nav-user-mobile .app-user-avatar { align-items: center; justify-content: center; }
    .nav-user-mobile .btn { min-height: var(--app-touch-size); color: white; border-color: rgba(255,255,255,.4); }
    .nav-root .nav-group-trigger, .nav-root .topnav-link { min-height: var(--app-touch-size); }
    .nav-root .nav-group, .nav-root .nav-group-panel, .nav-root .nav-rich-body { min-width: 0; max-width: 100%; }
    .nav-root .nav-rich-title, .nav-root .nav-rich-desc { overflow-wrap: anywhere; }
    .nav-root .nav-rich-desc { display: block; }
    .nav-root .nav-group-panel-title { color: rgba(255,255,255,.9); }
    .nav-root .nav-group-panel-desc, .nav-root .nav-rich-desc { color: rgba(255,255,255,.78); }
    .nav-root .nav-item { padding-inline: .25rem !important; }
}
@media (max-width: 767.98px) {
    :root { --app-page-gutter: .75rem; }
    .content.app-content { padding-top: 1rem; padding-bottom: calc(1.5rem + env(safe-area-inset-bottom)); }
    .app-content :is(.app-page-header, .dashboard-header, .reports-header, .role-access-header, .catalog-page-header, .distributors-header, .users-header, .settings-page-header) { margin-bottom: 1rem; }
    .app-page-header .app-page-header-layout { flex-direction: column; align-items: stretch; gap: .75rem; }
    .app-page-header .app-page-title-row { gap: .5rem .75rem; }
    .app-content h1.app-page-title { font-size: 1.5rem !important; line-height: 1.25; gap: .5rem; }
    .app-page-header .app-page-title { flex: 1 1 100%; }
    .app-page-icon { width: 1.25rem; height: 1.25rem; flex-basis: 1.25rem; }
    .app-page-header .app-page-meta { align-items: stretch; gap: .5rem; }
    .app-page-header .app-page-actions { width: 100%; }
    .app-page-header .app-page-actions > * { flex: 1 1 auto; }
    .app-page-header p { margin-top: .4rem; font-size: .875rem; line-height: 1.5; }
    .app-form-grid, .app-form-grid--three, .report-filter-groups, .report-filter-pair { grid-template-columns: minmax(0, 1fr); }
    .app-filter-bar .app-filter-search { flex: 1 1 100%; min-width: 0; width: 100%; }
    .app-filter-bar > select, .app-filter-control { min-width: 0 !important; max-width: 100%; flex: 1 1 8rem; }
    .app-filter-tools { width: 100%; }
    .app-filter-tools .btn { flex: 1 1 auto; }
    .app-content .btn, .app-filter-bar .btn, .app-action-buttons .btn { min-height: var(--app-touch-size); min-width: var(--app-touch-size); }
    .app-modal-backdrop {
        padding: max(.5rem, env(safe-area-inset-top)) max(.5rem, env(safe-area-inset-right)) max(.5rem, env(safe-area-inset-bottom)) max(.5rem, env(safe-area-inset-left)) !important;
        align-items: flex-start !important;
        overflow: hidden;
    }
    :root :is(.app-modal-dialog, .product-details-dialog) {
        width: 100% !important;
        max-height: calc(100vh - 1rem) !important;
        max-height: calc(100dvh - max(.5rem, env(safe-area-inset-top)) - max(.5rem, env(safe-area-inset-bottom))) !important;
        border-radius: .5rem !important;
        overflow: hidden;
    }
    .app-modal-header {
        gap: .5rem;
        padding: .65rem .75rem !important;
    }
    .app-modal-header > :first-child { min-width: 0; overflow-wrap: anywhere; }
    .app-modal-body { padding: .75rem !important; }
    :root :is(.btn-close, .app-modal-close) { box-sizing: border-box; width: var(--app-touch-size); height: var(--app-touch-size); min-width: var(--app-touch-size); flex-shrink: 0; }
    :root :is(.app-action-bar, .transaction-action-bar, .product-form-actions, .app-modal-footer) {
        bottom: 0;
        flex-wrap: wrap;
        padding: .65rem .75rem max(.65rem, env(safe-area-inset-bottom));
        background: var(--app-modal-surface);
    }
    :root :is(.app-action-buttons, .transaction-action-buttons, .product-form-action-buttons, .app-modal-actions) { width: 100%; flex-direction: row; flex-wrap: wrap; gap: .5rem; }
    :root :is(.app-action-buttons, .transaction-action-buttons, .product-form-action-buttons, .app-modal-actions) .btn { flex: 1 1 8rem; min-width: 0 !important; min-height: var(--app-touch-size); }
    .app-modal-body :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea) { max-width: 100%; font-size: 1rem; }
}