/**
 * Global responsive fixes — dashboard, builder, data tables, public survey.
 * Loaded in wp_footer so it overrides page-specific stylesheets.
 */

/* -------------------------------------------------------------------------
   WordPress theme wrappers — prevent fixed-width theme layout breaking mobile
   ------------------------------------------------------------------------- */
body.sfp-dash,
body:has(.sfp-dash-wrap),
body:has(.sfp-hub-app),
body.sfp-dash #page,
body:has(.sfp-dash-wrap) #page,
body.sfp-dash .site,
body:has(.sfp-dash-wrap) .site,
body.sfp-dash .site-content,
body:has(.sfp-dash-wrap) .site-content,
body.sfp-dash .content-area,
body:has(.sfp-dash-wrap) .content-area,
body.sfp-dash .entry-content,
body:has(.sfp-dash-wrap) .entry-content,
body.sfp-dash .wp-block-group,
body:has(.sfp-dash-wrap) .wp-block-group,
body.sfp-dash main,
body:has(.sfp-dash-wrap) main {
	max-width: 100% !important;
	width: 100% !important;
	box-sizing: border-box;
}

body.sfp-dash .entry-content > .sfp-dash-wrap,
body:has(.sfp-dash-wrap) .entry-content > .sfp-dash-wrap,
body.sfp-dash .entry-content > .sfp-hub-app,
body:has(.sfp-hub-app) .entry-content > .sfp-hub-app,
body.sfp-dash .entry-content > .sfp-gate,
body.sfp-dash .entry-content > .sfp-surveys-app,
body:has(.sfp-surveys-app) .entry-content > .sfp-surveys-app {
	width: 100%;
	max-width: 100%;
}

body.sfp-dash,
body:has(.sfp-dash-wrap) {
	overflow-x: clip;
}

/* -------------------------------------------------------------------------
   Base safety
   ------------------------------------------------------------------------- */
.sfp-dash-wrap,
.sfp-dash-main,
.sfp-dash-main__body,
.sfp-data-dash,
.sfp-builder,
.sfp-hub-app,
.sfp-render-layout {
	min-width: 0;
	max-width: 100%;
}

img,
video,
iframe {
	max-width: 100%;
	height: auto;
}

/* -------------------------------------------------------------------------
   Dashboard shell — mobile nav clearance (768px)
   ------------------------------------------------------------------------- */
@media (max-width: 768px) {
	.sfp-dash-wrap .sfp-dash-main,
	body.sfp-dash .sfp-dash-main {
		padding: 52px 16px 40px !important;
		box-sizing: border-box;
		width: 100% !important;
		max-width: 100% !important;
	}

	.sfp-dash-wrap {
		display: block !important;
		width: 100% !important;
		max-width: 100vw !important;
	}

	.sfp-dash-main__bar,
	.sfp-dash-wrap .sfp-dash-main__bar {
		padding-left: 52px !important;
		padding-right: 16px !important;
		margin-top: 0 !important;
		width: 100%;
		box-sizing: border-box;
	}

	.sfp-dash-main__title,
	.sfp-dash-wrap .sfp-dash-main__title {
		font-size: clamp(1.125rem, 4.5vw, 1.35rem) !important;
		line-height: 1.25;
		word-break: break-word;
		flex: 1 1 100%;
	}

	.sfp-dash-main__bar-actions {
		margin-left: 0 !important;
		width: 100%;
		justify-content: flex-end;
	}

	.sfp-dash-main__body {
		padding-left: 0;
		padding-right: 0;
		width: 100%;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}

	.sfp-hub-app__main {
		padding-left: 0 !important;
		padding-right: 0 !important;
		width: 100% !important;
		max-width: 100% !important;
	}

	.sfp-hub-app__topbar {
		padding-left: 52px !important;
		padding-right: 16px !important;
		flex-wrap: wrap;
		gap: 0.5rem;
		width: 100%;
		box-sizing: border-box;
	}

	.sfp-hub-app__topbar-left {
		flex: 1 1 100%;
		min-width: 0;
	}

	.sfp-hub-app__topbar-right {
		width: 100%;
		justify-content: flex-start;
		flex-wrap: wrap;
	}

	.sfp-hub-app__brand-divider,
	.sfp-hub-app__brand-tag {
		display: none;
	}

	.sfp-hub-app__user-name {
		max-width: 120px;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	body.sfp-dash--builder .sfp-dash-main,
	.sfp-dash-wrap--builder .sfp-dash-main {
		padding-top: 52px !important;
	}

	.sfp-builder {
		width: 100%;
		max-width: 100%;
		overflow-x: hidden;
	}
}

@media (max-width: 480px) {
	.sfp-dash-drawer-toggle {
		top: 10px;
		left: 10px;
	}

	.sfp-dash-wrap .sfp-dash-main {
		padding-left: 12px !important;
		padding-right: 12px !important;
	}

	.sfp-dash-main__bar,
	.sfp-dash-wrap .sfp-dash-main__bar {
		padding-left: 48px !important;
		padding-right: 12px !important;
		border-radius: 10px;
	}
}

/* -------------------------------------------------------------------------
   Toolbars & filters
   ------------------------------------------------------------------------- */
@media (max-width: 768px) {
	.sfp-surveys-list__toolbar-main,
	.sfp-data-dash__toolbar-main,
	.sfp-analytics__toolbar-main,
	.sfp-templates__toolbar-main {
		grid-template-columns: 1fr !important;
	}

	.sfp-data-dash__control,
	.sfp-data-dash__control--grow,
	.sfp-analytics__control {
		min-width: 0 !important;
		width: 100%;
	}

	.sfp-data-dash__toolbar-main .sfp-data-dash__input,
	.sfp-data-dash__toolbar-main .sfp-data-dash__select,
	.sfp-analytics__toolbar-main .sfp-analytics__input,
	.sfp-analytics__toolbar-main .sfp-analytics__select {
		width: 100% !important;
		min-width: 0 !important;
		max-width: none !important;
	}

	.sfp-data-dash__toolbar-actions,
	.sfp-surveys-list__toolbar-actions,
	.sfp-analytics__toolbar-actions {
		flex-wrap: wrap;
		gap: 0.5rem;
	}

	.sfp-data-dash__toolbar-actions .sfp-btn,
	.sfp-surveys-list__toolbar-actions .sfp-btn {
		flex: 1 1 auto;
		min-width: min(100%, 140px);
		justify-content: center;
	}

	.sfp-data-dash__bulk {
		flex-wrap: wrap;
		gap: 0.5rem;
	}

	.sfp-data-dash__bulk select,
	.sfp-data-dash__bulk-extra {
		min-width: 0 !important;
		max-width: 100% !important;
		flex: 1 1 100%;
	}
}

/* -------------------------------------------------------------------------
   Data tables — Responses & Leads
   ------------------------------------------------------------------------- */
@media (max-width: 900px) {
	.sfp-data-dash--responses .sfp-data-dash__table th:nth-child(5),
	.sfp-data-dash--responses .sfp-data-dash__table td:nth-child(5),
	.sfp-data-dash--responses .sfp-data-dash__table th:nth-child(6),
	.sfp-data-dash--responses .sfp-data-dash__table td:nth-child(6),
	.sfp-data-dash--responses .sfp-data-dash__table th:nth-child(7),
	.sfp-data-dash--responses .sfp-data-dash__table td:nth-child(7) {
		display: none;
	}
}

@media (max-width: 640px) {
	.sfp-data-dash--responses .sfp-data-dash__table th:nth-child(2),
	.sfp-data-dash--responses .sfp-data-dash__table td:nth-child(2),
	.sfp-data-dash--responses .sfp-data-dash__table th:nth-child(4),
	.sfp-data-dash--responses .sfp-data-dash__table td:nth-child(4) {
		display: none;
	}

	.sfp-data-dash__table {
		font-size: 13px;
	}

	.sfp-data-dash__table th,
	.sfp-data-dash__table td {
		padding: 8px 10px;
	}

	.sfp-data-dash__pager {
		flex-wrap: wrap;
		gap: 0.5rem;
	}

	.sfp-kpi {
		min-width: 0;
		flex: 1 1 calc(50% - 8px);
		margin: 0;
	}
}

@media (max-width: 768px) {
	.sfp-data-dash__drawer {
		width: 100% !important;
		max-width: 100%;
	}

	.sfp-data-dash__drawer-header {
		padding: 14px 16px;
	}

	.sfp-data-dash__drawer-body {
		padding: 14px 16px;
	}
}

/* -------------------------------------------------------------------------
   Surveys list & cards
   ------------------------------------------------------------------------- */
@media (max-width: 768px) {
	.sfp-surveys-list__head {
		flex-direction: column;
		align-items: stretch;
		gap: 0.75rem;
	}

	.sfp-surveys-list__head .sfp-btn {
		width: 100%;
		justify-content: center;
	}

	.sfp-surveys-list__grid {
		grid-template-columns: 1fr !important;
	}

	.sfp-survey-card__meta {
		grid-template-columns: 1fr;
	}

	.sfp-survey-card__actions {
		flex-wrap: wrap;
		gap: 0.4rem;
	}

	.sfp-survey-card__actions-spacer {
		display: none;
	}
}

/* -------------------------------------------------------------------------
   Builder
   ------------------------------------------------------------------------- */
@media (max-width: 768px) {
	.sfp-builder__topbar {
		flex-wrap: wrap;
		gap: 0.5rem;
		padding: 0.65rem 0.75rem;
	}

	.sfp-builder__topbar-left,
	.sfp-builder__topbar-center,
	.sfp-builder__topbar-right {
		flex: 1 1 100%;
		min-width: 0;
	}

	.sfp-builder__topbar-right {
		justify-content: flex-start;
		flex-wrap: wrap;
		gap: 0.4rem;
	}

	.sfp-builder__back {
		max-width: 100%;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.sfp-builder__title-input {
		width: 100%;
		min-width: 0;
	}

	.sfp-builder__design-grid,
	.sfp-builder__themes-grid {
		grid-template-columns: 1fr !important;
	}

	.sfp-builder__journey {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}

	.sfp-builder__pane {
		min-width: 0;
	}

	.sfp-builder__drawer {
		width: 100% !important;
		max-width: 100%;
	}

	.sfp-wizard__grid {
		grid-template-columns: 1fr !important;
	}
}

@media (max-width: 640px) {
	.sfp-builder__mode {
		width: 100%;
	}

	.sfp-builder__mode-btn {
		flex: 1;
		min-width: 0;
		padding-left: 0.5rem;
		padding-right: 0.5rem;
		font-size: 0.8125rem;
	}
}

/* -------------------------------------------------------------------------
   Agency, branding, help, integrations
   ------------------------------------------------------------------------- */
@media (max-width: 768px) {
	.sfp-agency__row {
		grid-template-columns: 1fr !important;
	}

	.sfp-agency,
	.sfp-branding,
	.sfp-help {
		max-width: 100%;
	}

	.sfp-int__shell {
		grid-template-columns: 1fr !important;
	}

	.sfp-int__nav-col {
		max-width: 100%;
	}

	.sfp-int__nav {
		overflow-x: auto;
		flex-wrap: nowrap;
		-webkit-overflow-scrolling: touch;
	}

	.sfp-branding__layout {
		grid-template-columns: 1fr !important;
	}

	.sfp-kb__layout {
		grid-template-columns: 1fr !important;
	}
}

/* -------------------------------------------------------------------------
   Hub dashboard charts
   ------------------------------------------------------------------------- */
@media (max-width: 768px) {
	.sfp-dashx__kpis {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}

	.sfp-dashx__charts {
		grid-template-columns: 1fr !important;
	}
}

@media (max-width: 520px) {
	.sfp-dashx__kpis {
		grid-template-columns: 1fr !important;
	}

	.sfp-dashx__funnel-steps {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}
}

/* -------------------------------------------------------------------------
   Analytics
   ------------------------------------------------------------------------- */
@media (max-width: 768px) {
	.sfp-analytics__grid {
		grid-template-columns: 1fr !important;
	}

	.sfp-analytics__card,
	.sfp-analytics__card--wide {
		grid-column: 1 / -1 !important;
	}

	.sfp-analytics__hero-inner {
		flex-direction: column;
		align-items: stretch;
	}
}

/* -------------------------------------------------------------------------
   Modals & dialogs
   ------------------------------------------------------------------------- */
@media (max-width: 640px) {
	.sfp-account-modal__panel,
	.sfp-int-modal__panel,
	.sfp-tpl-modal__panel,
	.sfp-builder__palette-popover {
		width: calc(100% - 24px) !important;
		max-width: none !important;
		margin: 12px;
	}

	.sfp-account-modal__tabs {
		flex-wrap: wrap;
	}
}

/* -------------------------------------------------------------------------
   Public survey page
   ------------------------------------------------------------------------- */
@media (max-width: 768px) {
	.sfp-render-body--standalone {
		padding: 3.5rem 12px 1.5rem !important;
	}

	.sfp-render-root--embed {
		padding: 3.25rem 12px 1.25rem !important;
	}

	.sfp-render-theme {
		top: max(0.65rem, env(safe-area-inset-top, 0px));
		right: max(0.65rem, env(safe-area-inset-right, 0px));
	}

	.sfp-survey__card {
		padding: 1.35rem 1.1rem !important;
		border-radius: 16px;
	}

	.sfp-survey__actions {
		flex-direction: column-reverse;
		align-items: stretch;
	}

	.sfp-survey__actions .sfp-survey__btn {
		width: 100%;
		justify-content: center;
	}

	.sfp-survey__actions > span:empty {
		display: none;
	}

	.sfp-survey__scale {
		justify-content: center;
	}

	.sfp-survey__choices--grid {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}
}

@media (max-width: 480px) {
	.sfp-survey__choices--grid {
		grid-template-columns: 1fr !important;
	}

	.sfp-survey__theme-label {
		position: absolute;
		width: 1px;
		height: 1px;
		padding: 0;
		margin: -1px;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
		white-space: nowrap;
		border: 0;
	}
}

/* -------------------------------------------------------------------------
   Guest / landing
   ------------------------------------------------------------------------- */
@media (max-width: 768px) {
	.sfp-guest__layout,
	.sfp-landing__hero-inner,
	.sfp-landing__pricing-grid {
		grid-template-columns: 1fr !important;
	}

	.sfp-guest__card,
	.sfp-landing__hero-copy {
		padding-left: 1.25rem;
		padding-right: 1.25rem;
	}
}