/* =========================================================
   Responsive layer for the public website and the Buyer / Seller panel.
   Loaded last in website/layouts/layout-common.php and layout-dashboard.php,
   so it only has to fix what the page styles get wrong on smaller screens.
   Breakpoints follow Bootstrap 5: 1199.98 / 991.98 / 767.98 / 575.98.
   ========================================================= */

/* ---------- All screens ---------- */
/* never let one wide element give the whole page a sideways scrollbar ("clip" keeps sticky headers working) */
body { overflow-x: clip; }
img, video, iframe, canvas, svg, embed, object { max-width: 100%; }
video { height: auto; }
/* long unbroken text (emails, URLs, IDs) wraps instead of pushing the layout out */
p, li, dd, label, .alert, .card-body, .modal-body { overflow-wrap: break-word; }
/* every listing table scrolls inside its own box */
.data_table, .table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ---------- Tablet and below ---------- */
@media (max-width: 991.98px) {
	/* panel: sidebar becomes a slide-in drawer, content uses the full width */
	.fe-panel .main_content,
	.fe-panel .main_content.margin_slide { margin-left: 0; }
	.fe-panel .fe-sidebar,
	.fe-panel .fe-sidebar.slide_navbar {
		width: min(280px, 85vw);
		transform: translateX(-100%);
		transition: transform var(--fe-ease);
		z-index: 1045;
	}
	.fe-panel.fe-nav-open .fe-sidebar { transform: none; }
	.fe-panel.fe-nav-open { overflow: hidden; }
	.fe-panel .layout_wrapper::before {
		content: "";
		position: fixed;
		inset: 0;
		z-index: 1040;
		background: rgba(16, 24, 40, .45);
		opacity: 0;
		visibility: hidden;
		transition: opacity var(--fe-ease), visibility var(--fe-ease);
	}
	.fe-panel.fe-nav-open .layout_wrapper::before { opacity: 1; visibility: visible; }

	/* the drawer always shows the full menu, even if the desktop menu was collapsed to icons */
	.fe-panel .slide_navbar .fe-brand { justify-content: flex-start; padding: 0 18px; }
	.fe-panel .slide_navbar .fe-brand-full { display: block; }
	.fe-panel .slide_navbar .fe-brand-icon { display: none; }
	.fe-panel .slide_navbar .fe-nav-label { display: block; }
	.fe-panel .slide_navbar .fe-nav-title { display: block; }
	.fe-panel .slide_navbar .fe-nav-title + ul { border-top: 0; margin-top: 0; padding-top: 0; }
	.fe-panel .slide_navbar .fe-live { display: inline-flex; }
	.fe-panel .slide_navbar .fe-tag { display: inline; }
	.fe-panel .slide_navbar .fe-nav-link { justify-content: flex-start; padding: 8px 10px; }
	.fe-panel .slide_navbar .fe-nav-icon { font-size: 14px; }
	.fe-panel .slide_navbar .fe-badge { position: static; min-width: 20px; height: 20px; padding: 0 6px; font-size: 11px; line-height: 20px; }

	.fe-panel .knowledge_desk_btn,
	.fe-panel:has(.slide_navbar) .knowledge_desk_btn { left: 12px; }
	.fe-panel .page_content { padding: 16px; }
	.fe-panel .fe-header { gap: 10px; padding: 0 12px; }
	.fe-panel .fe-header-right { gap: 8px; }
	.fe-panel .fe-org-logo { display: none; }

	/* Knowledge Desk popup is a fixed 800px (common.css) and its chart a fixed 800px box */
	.modal-knowledge { max-width: calc(100vw - 16px) !important; margin: 8px auto !important; }
	.fe-panel #accordionMarketSFX > div { width: 100% !important; height: auto !important; aspect-ratio: 4 / 5; }
}

/* ---------- Phones ---------- */
@media (max-width: 767.98px) {
	.fe-panel .fe-crumb > span,
	.fe-panel .fe-crumb > i { display: none; }
	.fe-panel .fe-user-text { display: none; }
	.fe-panel .fe-user { padding: 2px; }
	.fe-panel .fe-user > .fa-angle-down { display: none; }
	.fe-panel .fe-live-status > span { display: none; }
	.fe-panel .fe-live-status { padding: 6px; }

	.fe-panel .page_content { padding: 12px; }
	.fe-panel .fe-title-text { font-size: 16px; }
	.fe-panel .parent_tab .nav-link { padding: 8px 14px; }

	/* header filter bars: stack the controls and let them use the full width */
	.fe-panel .page_content .top_button_group .row > [class*="col-"] { justify-content: flex-start !important; }
	.fe-panel .page_content .top_button_group .row > [class*="col-"] + [class*="col-"] { margin-top: 8px; }

	/* popups use nearly the whole screen */
	.modal-dialog { margin: 8px auto; }
	.modal-body { padding: 14px; }

	/* floating buttons: icons only so they don't cover the content */
	.fe-panel .knowledge_desk_btn .lets_chat,
	.fe-panel .chat-bubble .lets_chat { display: none; }
	.fe-panel .chat-bubble,
	.fe-panel .knowledge_desk_btn { width: 47px; }
	.fe-panel .chat-bubble { right: 12px; }
	.fe-panel .chat-bubble > .btn { padding: 0; }
}

/* ---------- Small phones ---------- */
@media (max-width: 575.98px) {
	.fe-panel .fe-header { --fe-header-h: 52px; }
	.fe-panel .fe-crumb strong { max-width: 40vw; }
	.fe-panel .fe-title-bar { gap: 8px; }
	.fe-panel .fe-title-actions .btn { padding: 6px 12px; }
	.fe-panel .parent_tab .nav-link { padding: 7px 12px; font-size: 12px; }
	.fe-panel .tab-pane.p-3 { padding: 12px !important; }
	.fe-panel .data_table { font-size: 11px; }
}

@media (prefers-reduced-motion: reduce) {
	.fe-panel .fe-sidebar, .fe-panel .layout_wrapper::before { transition: none; }
}