/**
 * PSBDx Smart Report Management — Form Builder Styles (v1.4.0)
 *
 * @package PSBDx_Smart_Report_Management
 * @since   1.3.0
 */

/* ─── Variables ─────────────────────────────────────────────────────────────── */
:root {
	--psrm-accent:         #2271b1;
	--psrm-accent-hover:   #135e96;
	--psrm-danger:         #b91c1c;
	--psrm-warn-bg:        #fff8e7;
	--psrm-warn-border:    #d97706;
	--psrm-success:        #15803d;
	--psrm-surface:        #ffffff;
	--psrm-surface-alt:    #f6f7f7;
	--psrm-border:         #dcdcde;
	--psrm-radius:         6px;
	--psrm-shadow:         0 1px 3px rgba(0,0,0,.1);
	--psrm-transition:     150ms ease;
}

/* ─── Mobile toolbar ─────────────────────────────────────────────────────────── */
/* Hidden by default (desktop); shown as a sticky "Add Field" bar on mobile. */
.psrm-mobile-toolbar {
	display: none;
}

/* Backdrop is shared by the mobile library sheet AND the field-settings
 * popup, which now opens on every viewport (desktop: right-side drawer,
 * mobile: bottom sheet) — so, unlike the toolbar above, this is NOT
 * mobile-only and must not live inside the mobile media query. */
.psrm-sheet-backdrop {
	display: none;
}
.psrm-sheet-backdrop:not( [hidden] ) {
	display:        block;
	position:       fixed;
	inset:          0;
	background:     rgba(0, 0, 0, .45);
	z-index:        100000;
	pointer-events: auto;
}

.psrm-sheet-close {
	display: none; /* mobile-only close button on the library bottom sheet — overridden inside the media query below */
}

/* Field settings popup's own close button — visible on every viewport,
 * since the settings panel is a popup everywhere now, not just on mobile. */
.psrm-settings-close-btn {
	margin-left:    auto;
	background:     transparent;
	border:         none;
	cursor:         pointer;
	color:          #646970;
	padding:        4px;
	display:        inline-flex;
	align-items:    center;
	border-radius:  4px;
	transition:     color var(--psrm-transition), background var(--psrm-transition);
}
.psrm-settings-close-btn:hover {
	color:      var(--psrm-danger);
	background: rgba(0, 0, 0, .05);
}

/* ─── Mobile bottom-sheet mode (viewport < 768px) ─────────────────────────────
 * The field library and field settings panel become slide-up bottom sheets
 * instead of being hidden behind a "desktop only" warning. Reordering uses
 * the Up/Down buttons on each field card rather than drag-and-drop, since
 * jQuery UI draggable/sortable don't support touch input out of the box.
 */
@media ( max-width: 767px ) {

	.psrm-mobile-toolbar {
		display:         flex;
		align-items:     center;
		justify-content: space-between;
		gap:             10px;
		position:        sticky;
		top:             32px;
		z-index:         10010;
		background:      var(--psrm-surface);
		border:          1px solid var(--psrm-border);
		border-radius:   var(--psrm-radius);
		padding:         10px 12px;
		margin-bottom:   14px;
	}
	.psrm-mobile-add-field-btn {
		display:     inline-flex;
		align-items: center;
		gap:         6px;
	}
	.psrm-mobile-field-count {
		font-size: 12px;
		color:     #646970;
	}

	/* Library + settings panels hide off-screen and re-appear as sheets only
	   when explicitly opened. `pointer-events: none` while closed guarantees
	   an off-screen sheet can never intercept a tap meant for the canvas
	   underneath — and, conversely, an open sheet always gets the tap even if
	   something upstream mis-set pointer-events on an ancestor. */
	.psrm-field-library,
	.psrm-field-settings-panel {
		position:      fixed;
		left:          0;
		right:         0;
		bottom:        0;
		max-height:    75vh;
		border-radius: 16px 16px 0 0;
		box-shadow:    0 -4px 24px rgba(0, 0, 0, .2);
		z-index:       100001;
		transform:      translateY(100%);
		transition:     transform 220ms ease;
		display:        flex !important; /* override aria-hidden-driven inline display if any */
		pointer-events: none;
	}
	.psrm-field-library.psrm-sheet-open,
	.psrm-field-settings-panel.psrm-sheet-open {
		transform:      translateY(0);
		pointer-events: auto !important;
	}
	.psrm-field-library-list,
	.psrm-field-settings-body {
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
	}
	.psrm-field-library-list {
		/* Two-column grid of tappable field types — faster to scan on a phone. */
		display:               grid;
		grid-template-columns: 1fr 1fr;
		gap:                   8px;
	}
	.psrm-library-field {
		flex-direction: column;
		align-items:    flex-start;
		gap:            4px;
		padding:        12px 10px;
		min-height:     58px;
	}

	.psrm-sheet-close {
		margin-left: auto;
		background:  transparent;
		border:      none;
		cursor:      pointer;
		font-size:   12px;
		font-weight: 600;
		color:       var(--psrm-accent);
		padding:     6px 8px;
		display:     inline-flex;
		align-items: center;
		gap:         4px;
	}

	/* Field cards: bigger tap targets, always-visible move/delete controls. */
	.psrm-field-card {
		padding: 14px;
	}
	.psrm-field-card-drag {
		display: none; /* dragging isn't reliable on touch — hide the drag handle */
	}
	.psrm-field-card-move-group {
		display: flex;
	}

	.psrm-tab-btn {
		flex: 1;
		justify-content: center;
	}
}

/* Move buttons are always available (desktop keyboard/mouse users benefit
   from them too), but stay compact and secondary next to the drag handle. */
.psrm-field-card-move-group {
	display:     flex;
	flex-direction: column;
	flex-shrink: 0;
}
.psrm-field-card-move {
	background:    transparent;
	border:        none;
	cursor:        pointer;
	padding:       2px;
	color:         #c3cdd7;
	line-height:   1;
	transition:    color var(--psrm-transition);
}
.psrm-field-card-move:hover {
	color: var(--psrm-accent);
}
.psrm-field-card-move .dashicons {
	font-size: 14px;
	width:     14px;
	height:    14px;
}

/* ─── Migration Gate ─────────────────────────────────────────────────────────── */
.psrm-migration-gate {
	display:         flex;
	flex-direction:  column;
	align-items:     center;
	text-align:      center;
	padding:         36px 24px;
	margin-bottom:   20px;
	background:      #fff8e7;
	border:          2px solid var(--psrm-warn-border);
	border-radius:   var(--psrm-radius);
}
.psrm-migration-icon {
	color:         var(--psrm-warn-border);
	margin-bottom: 12px;
}
.psrm-migration-gate h3 {
	margin: 0 0 8px;
	font-size: 16px;
	color: #78350f;
}
.psrm-migration-gate p {
	max-width: 520px;
	color: #78350f;
	margin: 0 0 16px;
	font-size: 13px;
}
.psrm-migrate-btn {
	font-size: 13px !important;
}
.psrm-builder-locked #psrm-builder-layout {
	pointer-events: none;
	opacity: .45;
}
.psrm-migrate-success {
	margin-bottom: 12px;
}

/* ─── Tabs ───────────────────────────────────────────────────────────────────── */
.psrm-tabs-nav {
	display:        flex;
	gap:            4px;
	border-bottom:  2px solid var(--psrm-border);
	margin-bottom:  20px;
}
.psrm-tab-btn {
	display:         inline-flex;
	align-items:     center;
	gap:             6px;
	padding:         10px 18px;
	background:      transparent;
	border:          none;
	border-bottom:   3px solid transparent;
	margin-bottom:   -2px;
	font-size:       13px;
	font-weight:     600;
	color:           #646970;
	cursor:          pointer;
	border-radius:   var(--psrm-radius) var(--psrm-radius) 0 0;
	transition:      color var(--psrm-transition), border-color var(--psrm-transition);
}
.psrm-tab-btn:hover {
	color: var(--psrm-accent);
}
.psrm-tab-btn.psrm-tab-active {
	color:        var(--psrm-accent);
	border-color: var(--psrm-accent);
	background:   #f0f6fc;
}
.psrm-tab-btn .dashicons {
	font-size: 16px;
	width:     16px;
	height:    16px;
}
.psrm-tab-panel.psrm-tab-hidden {
	display: none;
}

/* ─── Builder layout ─────────────────────────────────────────────────────────
 * Mobile-first: single column by default. The 2-column grid (library +
 * canvas) only applies at >=768px, in its OWN media query, so there is no
 * cascade ambiguity between this and any mobile override — before 1.3.3 this
 * rule was unconditional and came after the mobile flex-column rule in the
 * file, so it won the cascade tie-break (equal specificity, later source
 * order) and silently overrode the mobile layout on every viewport.
 *
 * As of 1.4.0 the Field Settings panel is a popup on every viewport (see the
 * "Field Settings popup" section below) rather than a permanent third grid
 * column — that third fixed-width column was what left too little room for
 * the canvas at anything narrower than a wide monitor.
 */
.psrm-builder-layout {
	display:        flex;
	flex-direction: column;
	gap:            12px;
	min-height:     0;
}

@media ( min-width: 768px ) {
	.psrm-builder-layout {
		display:               grid;
		grid-template-columns: 220px 1fr;
		gap:                   16px;
		min-height:            480px;
	}
}

@media ( min-width: 768px ) and ( max-width: 1200px ) {
	.psrm-builder-layout {
		grid-template-columns: 200px 1fr;
	}
}

/* Grid/flex children must be allowed to shrink below their content's
 * intrinsic (min-content) width — grid and flex items default to
 * `min-width: auto`, which lets wide unbreakable content (like the field
 * card's icon + label + move/delete buttons) force the item wider than its
 * track and visually bleed into the next column.
 */
.psrm-field-library,
.psrm-canvas-wrap {
	min-width: 0;
}
.psrm-field-card,
.psrm-field-card-info {
	min-width: 0;
}

/* ─── Field Library ──────────────────────────────────────────────────────────── */
.psrm-field-library {
	background:    var(--psrm-surface-alt);
	border:        1px solid var(--psrm-border);
	border-radius: var(--psrm-radius);
	overflow:      hidden;
}
.psrm-field-library-header {
	display:         flex;
	align-items:     center;
	gap:             8px;
	padding:         12px 14px;
	background:      var(--psrm-surface);
	border-bottom:   1px solid var(--psrm-border);
	font-size:       12px;
	text-transform:  uppercase;
	letter-spacing:  .05em;
	color:           #646970;
}
.psrm-field-library-list {
	padding: 10px;
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.psrm-library-field {
	display:         flex;
	align-items:     center;
	gap:             9px;
	padding:         9px 12px;
	background:      var(--psrm-surface);
	border:          1px solid var(--psrm-border);
	border-radius:   var(--psrm-radius);
	cursor:          grab;
	font-size:       12.5px;
	color:           #1e293b;
	transition:      background var(--psrm-transition), border-color var(--psrm-transition), transform var(--psrm-transition);
	user-select:     none;
	position:        relative;
}
.psrm-library-field:hover {
	background:   #f0f6fc;
	border-color: var(--psrm-accent);
}
.psrm-library-field:active {
	cursor: grabbing;
}
.psrm-library-field-icon {
	color: var(--psrm-accent);
	font-size: 16px;
	width: 16px;
	height: 16px;
	flex-shrink: 0;
}
.psrm-library-field-disabled {
	opacity:        .6;
	cursor:         not-allowed;
	pointer-events: none;
}
.psrm-captcha-badge {
	display:         inline-flex;
	align-items:     center;
	gap:             3px;
	margin-left:     auto;
	font-size:       10px;
	background:      #fef2f2;
	color:           var(--psrm-danger);
	border:          1px solid #fecaca;
	border-radius:   4px;
	padding:         2px 6px;
	white-space:     nowrap;
}
.psrm-captcha-badge .dashicons {
	font-size: 12px;
	width:     12px;
	height:    12px;
}

/* ─── Canvas ─────────────────────────────────────────────────────────────────── */
.psrm-canvas-wrap {
	background:    var(--psrm-surface);
	border:        1px solid var(--psrm-border);
	border-radius: var(--psrm-radius);
	display:       flex;
	flex-direction: column;
}
.psrm-canvas-header {
	display:       flex;
	align-items:   center;
	gap:           8px;
	padding:       12px 16px;
	border-bottom: 1px solid var(--psrm-border);
	font-size:     12px;
	text-transform: uppercase;
	letter-spacing: .05em;
	color:         #646970;
}
.psrm-canvas-hint {
	font-weight:   400;
	text-transform: none;
	letter-spacing: 0;
	color:         #a0aec0;
}
.psrm-canvas {
	flex:           1;
	min-height:     380px;
	padding:        16px;
	display:        flex;
	flex-direction: column;
	gap:            10px;
	transition:     background var(--psrm-transition);
}
.psrm-canvas-drop-hover {
	background: #f0f6fc;
}
.psrm-canvas-empty {
	display:        flex;
	flex-direction: column;
	align-items:    center;
	justify-content: center;
	padding:        48px 24px;
	color:          #a0aec0;
	text-align:     center;
	pointer-events: none;
}
.psrm-canvas-empty .dashicons {
	font-size: 40px;
	width:     40px;
	height:    40px;
	margin-bottom: 12px;
	color:     #c3cdd7;
}
.psrm-canvas-empty p {
	margin: 0;
	font-size: 13px;
}

/* ─── Field Cards ────────────────────────────────────────────────────────────── */
.psrm-field-card {
	display:         flex;
	align-items:     center;
	gap:             10px;
	padding:         12px 14px;
	background:      var(--psrm-surface);
	border:          1.5px solid var(--psrm-border);
	border-radius:   var(--psrm-radius);
	cursor:          pointer;
	transition:      border-color var(--psrm-transition), box-shadow var(--psrm-transition);
	position:        relative;
}
.psrm-field-card:hover {
	border-color: var(--psrm-accent);
	box-shadow:   0 0 0 3px rgba(34, 113, 177, .12);
}
.psrm-field-card.psrm-field-card-active {
	border-color: var(--psrm-accent);
	background:   #f0f6fc;
	box-shadow:   0 0 0 3px rgba(34, 113, 177, .2);
}
.psrm-field-card-drag {
	color:   #c3cdd7;
	cursor:  ns-resize;
	font-size: 18px;
	width:   18px;
	height:  18px;
	flex-shrink: 0;
	transition: color var(--psrm-transition);
}
.psrm-field-card:hover .psrm-field-card-drag {
	color: var(--psrm-accent);
}
.psrm-field-card-info {
	flex:         1;
	display:      flex;
	align-items:  center;
	gap:          8px;
	overflow:     hidden;
}
.psrm-field-card-type {
	font-size:    10px;
	font-weight:  700;
	text-transform: uppercase;
	letter-spacing: .06em;
	color:        #fff;
	background:   var(--psrm-accent);
	padding:      2px 7px;
	border-radius: 4px;
	flex-shrink:  0;
}
.psrm-field-card-label {
	font-size:    13px;
	color:        #1e293b;
	white-space:  nowrap;
	overflow:     hidden;
	text-overflow: ellipsis;
}
.psrm-field-card-required {
	color:        var(--psrm-danger);
	font-weight:  700;
	margin-left:  2px;
}
.psrm-field-card-delete {
	background:   transparent;
	border:       none;
	cursor:       pointer;
	padding:      4px;
	border-radius: 4px;
	color:        #c3cdd7;
	transition:   color var(--psrm-transition), background var(--psrm-transition);
}
.psrm-field-card-delete:hover {
	color:      var(--psrm-danger);
	background: #fef2f2;
}
.psrm-field-card-delete .dashicons {
	font-size: 16px;
	width:     16px;
	height:    16px;
}

/* Sortable placeholder */
.psrm-canvas .ui-sortable-placeholder {
	border:       2px dashed var(--psrm-accent);
	border-radius: var(--psrm-radius);
	background:   #f0f6fc;
	visibility:   visible !important;
	height:       50px;
}

/* ─── Field Settings Panel ───────────────────────────────────────────────────── */
.psrm-field-settings-panel {
	background:    var(--psrm-surface-alt);
	border:        1px solid var(--psrm-border);
	border-radius: var(--psrm-radius);
	display:       flex;
	flex-direction: column;
	overflow:      hidden;
}
.psrm-field-settings-header {
	display:       flex;
	align-items:   center;
	gap:           8px;
	padding:       12px 14px;
	background:    var(--psrm-surface);
	border-bottom: 1px solid var(--psrm-border);
	font-size:     12px;
	text-transform: uppercase;
	letter-spacing: .05em;
	color:         #646970;
}
.psrm-field-settings-body {
	padding:    16px;
	flex:       1;
	overflow-y: auto;
}
.psrm-settings-hint {
	color:     #a0aec0;
	font-size: 12px;
	margin:    0;
}

/* ─── Field Settings popup (desktop) ──────────────────────────────────────────
 * As of 1.4.0 this is a popup on every viewport, not a permanent grid column:
 * on desktop it slides in from the right; on mobile (see the max-width:767px
 * block near the top of this file) it slides up as a bottom sheet. Opened by
 * selecting a field, closed via the "X" button, the backdrop, or Esc.
 *
 * Only positioning/motion properties are set here — deliberately nothing that
 * overlaps the shared "look" rule above (background, border-radius,
 * overflow, display) — so there is no cascade-order ambiguity between the
 * two rules regardless of which one appears first in the file.
 */
@media ( min-width: 768px ) {
	.psrm-field-settings-panel {
		position:       fixed;
		top:            var(--wp-admin--admin-bar--height, 32px); /* below the WP admin bar */
		right:          0;
		bottom:         0;
		width:          360px;
		max-width:      92vw;
		box-shadow:     -6px 0 28px rgba(0, 0, 0, .18);
		z-index:        100001;
		transform:      translateX(100%);
		transition:     transform 220ms ease;
		pointer-events: none;
	}
	.psrm-field-settings-panel.psrm-sheet-open {
		transform:      translateX(0);
		pointer-events: auto;
	}
}

/* Field settings form rows */
.psrm-field-settings-form {
	display:       flex;
	flex-direction: column;
	gap:           14px;
}
.psrm-sf-row {
	display:        flex;
	flex-direction: column;
	gap:            5px;
}
.psrm-sf-row label {
	font-size:   12px;
	font-weight: 600;
	color:       #344155;
}
.psrm-sf-row input[type="text"],
.psrm-sf-row input[type="number"] {
	width: 100%;
}
.psrm-sf-row-check {
	flex-direction: row;
	align-items:    center;
	gap:            8px;
}
.psrm-sf-row-check label {
	margin-bottom: 0;
}

/* Choice editor */
.psrm-choice-editor label {
	font-size:   12px;
	font-weight: 600;
	color:       #344155;
	margin-bottom: 6px;
	display:     block;
}
.psrm-choice-list {
	display:        flex;
	flex-direction: column;
	gap:            6px;
	margin-bottom:  8px;
}
.psrm-choice-row {
	display:     flex;
	gap:         6px;
	align-items: center;
}
.psrm-choice-row input {
	flex: 1;
}
.psrm-choice-del {
	background:   transparent;
	border:       none;
	cursor:       pointer;
	padding:      3px;
	color:        #c3cdd7;
	transition:   color var(--psrm-transition);
}
.psrm-choice-del:hover { color: var(--psrm-danger); }
.psrm-choice-del .dashicons { font-size: 16px; width: 16px; height: 16px; }
.psrm-choice-add {
	width:        100%;
	display:      flex;
	align-items:  center;
	justify-content: center;
	gap:          4px;
	font-size:    12px;
}
.psrm-choice-add .dashicons { font-size: 14px; width: 14px; height: 14px; }

/* ─── Settings Tab ───────────────────────────────────────────────────────────── */
.psrm-settings-sections {
	display:        flex;
	flex-direction: column;
	gap:            16px;
}
.psrm-settings-section {
	background:    var(--psrm-surface);
	border:        1px solid var(--psrm-border);
	border-radius: var(--psrm-radius);
	overflow:      hidden;
}
.psrm-settings-section-header {
	display:       flex;
	align-items:   center;
	gap:           8px;
	padding:       11px 16px;
	background:    var(--psrm-surface-alt);
	border-bottom: 1px solid var(--psrm-border);
	font-size:     13px;
}
.psrm-settings-section-header .dashicons {
	color: var(--psrm-accent);
}
.psrm-settings-section-body {
	padding: 14px 16px;
}
.psrm-settings-section-body p {
	margin: 0 0 8px;
}
.psrm-settings-section-body p:last-child {
	margin-bottom: 0;
}
.psrm-hint {
	font-size: 12px;
	color:     #646970;
	margin:    0 0 8px !important;
}
.psrm-inline-field {
	display:     flex;
	align-items: center;
	gap:         8px;
}
.psrm-notice-inline {
	display:     flex;
	align-items: flex-start;
	gap:         8px;
	padding:     10px 14px;
	border-radius: var(--psrm-radius);
	font-size:   12.5px;
}
.psrm-notice-warn {
	background:   var(--psrm-warn-bg);
	border:       1px solid var(--psrm-warn-border);
	color:        #78350f;
}
.psrm-notice-inline .dashicons {
	flex-shrink: 0;
	margin-top:  1px;
}
.psrm-integration-badge {
	display:       inline-block;
	font-size:     10px;
	font-weight:   700;
	text-transform: uppercase;
	padding:       2px 7px;
	border-radius: 4px;
	margin-left:   8px;
	letter-spacing: .04em;
}
.psrm-badge-woo {
	background: #7f54b3;
	color:      #fff;
}
.psrm-badge-lp {
	background: #2271b1;
	color:      #fff;
}
.psrm-integration-row {
	display:      flex;
	align-items:  center;
	flex-wrap:    wrap;
	gap:          4px;
}
.psrm-integration-unavailable {
	opacity: .85;
}
.psrm-label-muted {
	color: #a0aec0;
}
.psrm-integration-missing-badge {
	display:       inline-flex;
	align-items:   center;
	gap:           3px;
	margin-left:   8px;
	font-size:     11px;
	background:    #fef2f2;
	color:         var(--psrm-danger);
	border:        1px solid #fecaca;
	border-radius: 4px;
	padding:       2px 7px;
	white-space:   nowrap;
}
.psrm-integration-missing-badge .dashicons {
	font-size: 12px;
	width:     12px;
	height:    12px;
}

/* ─── Global legacy notice badge ────────────────────────────────────────────── */
.psrm-legacy-notice p {
	display:     flex;
	align-items: center;
	flex-wrap:   wrap;
	gap:         8px;
}
.psrm-legacy-badge {
	display:       inline-block;
	background:    #b91c1c;
	color:         #fff;
	font-size:     11px;
	font-weight:   700;
	padding:       2px 8px;
	border-radius: 999px;
}