/**
 * Known Universe - World Setup: Banner & Avatar Personalization
 *
 * Cards + modal styling for the Personalization accordion inside the
 * World Setup dashboard tool ([ku_dashboard_world_setup_tools]).
 * Enqueued from includes/core.php alongside ku-dashboard-accordion.css,
 * only on the world-customize page.
 */

.ku-personalization-cards {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	margin-top: 10px;
}

.ku-personalization-card {
	flex: 1 1 240px;
	max-width: 320px;
	border: 1px solid #e0e0e0;
	border-radius: 6px;
	padding: 16px;
	text-align: center;
}

/* Forced 08-10-2026 - only font-weight had !important, so the theme's
 * own paragraph styling was still winning on font-size and
 * margin-bottom, same "theme wins without !important" cause as every
 * other fix in this file today.
 *
 * Changed 600 -> 700 the same day, confirmed live via document.fonts on
 * staging: the site's title font ("Merienda") only has 300/500/700
 * loaded, not 600, so 600 was being silently substituted for a nearby
 * weight and reading as barely-bold on this particular typeface. 700 is
 * the heaviest real face this font has - there is no 800/900 file to
 * switch to.
 *
 * 700 alone still didn't read as bold enough, so two more steps on top
 * of the real 700 face: font-weight: 900 asks the browser to synthesize
 * extra boldness past the heaviest real face (confirmed this browser
 * has font-synthesis: weight turned on), and a thin text-stroke adds a
 * small guaranteed thickening that doesn't depend on synthesis being
 * available at all. Font size bumped one more px per Dianne (now +2px
 * over the surrounding text, was +1px). */
/* Switched to Inter 08-10-2026 - Merienda (the site's default heading
 * script font) never read clearly as "bold" here even at its real
 * heaviest face plus synthesis tricks; Inter is a plain, legible sans
 * serif better suited to a small UI label like this. Confirmed live
 * that Inter 400/500/600 are real loaded faces (Dianne added 600) -
 * 600 is the heaviest real face, no synthesis/text-stroke workaround
 * needed the way Merienda required. */
.ku-personalization-card-title {
	font-family: 'Inter', sans-serif !important;
	font-weight: 600 !important;
	font-size: calc( 1em + 2px ) !important;
	margin-bottom: 10px !important;
}

.ku-personalization-thumb {
	width: 100%;
	max-width: 240px;
	margin: 0 auto 12px;
	display: block;
	background: #f2f2f2;
}

.ku-personalization-thumb-cover {
	height: 100px;
	border-radius: 4px;
	object-fit: cover;
}

/* Fixed 08-10-2026 - Worlds use a rounded square avatar sitewide, not a
 * circle (circles are for personal member avatars only). This thumbnail
 * was still using border-radius: 50%, which didn't match how the World
 * avatar actually displays anywhere else. */
.ku-personalization-thumb-avatar {
	height: 120px;
	width: 120px;
	object-fit: cover;
	border-radius: 12px;
}

.ku-personalization-empty-thumb {
	height: 100px;
	border-radius: 4px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #888;
	font-size: 13px;
	margin: 0 auto 12px;
	max-width: 240px;
	background: #f2f2f2;
}

.ku-personalization-empty-thumb.ku-personalization-thumb-avatar {
	max-width: 120px;
	border-radius: 12px;
}

/* Modal shell - mirrors the existing .ku-role-access-modal pattern used
 * elsewhere in the plugin (class-ku-post-role-access.php) so the open/close
 * behavior feels consistent across the dashboard. */

.ku-personalization-modal {
	display: none;
	position: fixed;
	inset: 0;
	background: rgba( 0, 0, 0, 0.6 );
	z-index: 100000;
	align-items: center;
	justify-content: center;
}

/* Widened 08-10-2026 (480px -> 700px) to fit the image/controls side by
 * side instead of stacking everything in one narrow column, which was
 * forcing the modal to scroll internally on ordinary screens. */
/* Forced 08-10-2026 - same cause as the button fix above: the theme's
 * own rule was winning over our plain background: #fff, so the dark
 * backdrop behind the modal was showing through the card itself instead
 * of the card sitting on a solid white surface. */
.ku-personalization-modal-inner {
	background: #ffffff !important;
	border-radius: 6px;
	padding: 24px;
	max-width: 700px;
	width: 92%;
	max-height: 90vh;
	overflow-y: auto;
	position: relative;
}

/* Fix 3b: added 08-10-2026 - stops the page behind the modal from
 * scrolling while the modal is open. Toggled by JS
 * (ku-personalization-crop.js) on the same open/close actions that show
 * and hide the modal itself. */
body.ku-personalization-modal-open {
	overflow: hidden;
}

.ku-personalization-modal-close {
	position: absolute;
	top: 10px;
	right: 14px;
	background: none;
	border: none;
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
}

.ku-personalization-modal-footer {
	margin-top: 16px;
	display: flex;
	gap: 10px;
	justify-content: flex-end;
}

.ku-personalization-modal-status {
	margin-top: 10px;
	font-size: 13px;
}

.ku-personalization-modal-status.is-error {
	color: #b32d2e;
}

.ku-personalization-modal-status.is-success {
	color: #2a7d2a;
}

/* Crop tool - added 08-10-2026 alongside the custom upload/crop engine
 * (KU_Image_Personalization) that replaced BuddyBoss's own avatar/cover
 * upload+crop pipeline. See coding-rules.md/lessons-learned.md for why.
 */

.ku-personalization-modal-hint {
	font-size: 12px;
	color: #666;
	margin: -4px 0 12px;
}

.ku-personalization-hidden {
	display: none !important;
}

.ku-personalization-crop-stage {
	margin-bottom: 0;
}

.ku-personalization-crop-empty {
	border: 1px dashed #ccc;
	border-radius: 4px;
	padding: 30px 16px;
	text-align: center;
	color: #888;
	font-size: 13px;
}

/* Fixed 08-10-2026 - the crop box's darkening effect (below) uses the
 * standard "9999px box-shadow spread" trick to shade everything outside
 * the selection. That trick only works if its container clips the
 * overflow to the photo's own edges - without overflow: hidden here,
 * the shadow was spilling out past the photo and darkening the rest of
 * the modal (and, depending on layout, could spill further still).
 * This is almost certainly the real cause behind the "dark modal"
 * reports - not a browser or display setting. */
.ku-personalization-crop-area {
	position: relative;
	display: inline-block;
	max-width: 100%;
	overflow: hidden;
	touch-action: none;
}

/* Fixed 08-10-2026 - this used to force width:100% with a fixed
 * max-height, which let the box's shape drift away from the photo's own
 * shape and made object-fit letterbox it with black bars (visible as
 * black bars on a square avatar photo). That mismatch also fed wrong
 * measurements into the crop box's drag/position math in
 * ku-personalization-crop.js, which is why dragging didn't line up
 * either. Sizing the image only by max-width/max-height (both auto)
 * means it always renders at its own true proportions, so there is
 * never a gap between the image's rendered box and its visible content -
 * the crop box (constrained to the target shape in JS) sits inside that
 * real image, not inside an artificial letterboxed frame.
 *
 * Shrunk 08-10-2026 - max-height was 60vh, which let the photo balloon
 * tall enough (combined with the hint text, buttons, and footer below
 * it) to push the modal past 90vh and force an internal scrollbar. Now
 * that the image sits in its own column next to the buttons instead of
 * stacked above them, a fixed, moderate cap is enough on any normal
 * screen and matches the scale of BuddyBoss's own crop screen.
 */
.ku-personalization-crop-image {
	display: block;
	max-width: 100%;
	max-height: 380px;
	width: auto;
	height: auto;
	user-select: none;
	-webkit-user-drag: none;
}

.ku-personalization-crop-box {
	position: absolute;
	border: 2px dashed #fff;
	box-shadow: 0 0 0 9999px rgba( 0, 0, 0, 0.55 ), 0 0 0 1px rgba( 0, 0, 0, 0.85 );
	cursor: move;
	touch-action: none;
}

.ku-personalization-crop-hint {
	margin: 8px 0 0;
	font-size: 12px;
	color: #666;
}

/* Four corner handles - added 08-10-2026 (was one, bottom-right only).
 * With only one corner draggable, shrinking the box from any other side
 * meant resizing then re-dragging to recenter - two moves instead of
 * one. Each handle resizes from its own corner while the opposite
 * corner stays put (see startResize()/the corner-aware anchor math in
 * ku-personalization-crop.js). Positioned flush inside the box (0, not
 * a negative offset) for the same clipping reason noted below.
 */
.ku-personalization-crop-handle {
	position: absolute;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: #fff;
	border: 2px solid #122B46;
	touch-action: none;
}

.ku-personalization-crop-handle-nw {
	top: 0;
	left: 0;
	cursor: nwse-resize;
}

.ku-personalization-crop-handle-ne {
	top: 0;
	right: 0;
	cursor: nesw-resize;
}

.ku-personalization-crop-handle-sw {
	bottom: 0;
	left: 0;
	cursor: nesw-resize;
}

.ku-personalization-crop-handle-se {
	bottom: 0;
	right: 0;
	cursor: nwse-resize;
}

.ku-personalization-reset-confirm {
	border: 1px solid #e0c67a;
	background: #fdf6e3;
	border-radius: 4px;
	padding: 14px;
	font-size: 13px;
	color: #5a4a1f;
}

/* Side-by-side layout - added 08-10-2026. Photo/cropper on the left (it
 * keeps priority - flex: 1 1 auto takes whatever space the fixed-width
 * controls column doesn't need), buttons and status on the right. Below
 * the ku-personalization-side-breakpoint width the two stack instead,
 * since there isn't room for a real second column on a phone. */
.ku-personalization-crop-columns {
	display: flex;
	align-items: flex-start;
	gap: 24px;
}

.ku-personalization-crop-col-image {
	flex: 1 1 380px;
	max-width: 460px;
	min-width: 0;
}

/* Banner runs wide and short (1920x330) - added 08-10-2026. At the same
 * 460px cap the square avatar uses, a banner renders barely 80px tall,
 * too small to see detail in. Scoped to the banner modal's own ID so
 * the avatar modal's sizing is untouched. */
#ku-personalization-modal-banner .ku-personalization-modal-inner {
	max-width: 960px;
}

#ku-personalization-modal-banner .ku-personalization-crop-col-image {
	max-width: 700px;
}

/* Banner-only, added 08-10-2026 - the two live context previews (Home
 * Page, World Directory) stack below the crop tool, in the same left
 * column, at the same width. See ku-personalization-crop.js for how
 * these get redrawn every time the crop box moves or resizes. */
.ku-personalization-context-preview {
	margin-top: 16px;
}

.ku-personalization-context-preview-canvas {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 4px;
	background: #f2f2f2;
	border: 1px solid #e0e0e0;
}

/* Added 08-10-2026 - these two labels ("Home Page", "World Directory")
 * used to share .ku-personalization-preview-label with the Avatar modal's
 * "Preview" label. That shared rule has no !important, so - same "theme
 * wins without !important" cause as everything else in this file - it was
 * very likely being overridden entirely, leaving the headings unstyled.
 * Split into their own class so Avatar's label is untouched, and forced
 * every property so the theme can't win here either. */
.ku-personalization-context-preview-label {
	text-align: center !important;
	font-family: 'Inter', sans-serif !important;
	font-weight: 600 !important;
	font-size: 14px !important;
	color: #122b46 !important;
	margin: 0 0 6px !important;
}

.ku-personalization-crop-col-controls {
	flex: 0 0 210px;
	display: flex;
	flex-direction: column;
}

/* Banner's controls column also carries the size hint and the
 * Directory/Home explanation now (was full-width text above the crop
 * tool, moved into this column 08-10-2026 per Dianne) - a little wider
 * than the avatar modal's plain button column so that text doesn't wrap
 * excessively. */
#ku-personalization-modal-banner .ku-personalization-crop-col-controls {
	flex: 0 0 260px;
}

#ku-personalization-modal-banner .ku-personalization-modal-hint {
	margin: 0 0 12px;
}

@media ( max-width: 680px ) {
	.ku-personalization-crop-columns {
		flex-direction: column;
	}

	.ku-personalization-crop-col-image {
		max-width: 100%;
	}

	.ku-personalization-crop-col-controls {
		flex: 1 1 auto;
		width: 100%;
	}

	/* Without this, the banner-specific 260px column width above (an ID
	 * selector, so it out-specificities this plain-class mobile rule)
	 * would stay a fixed 260px instead of going full width once the
	 * layout stacks - caught before it shipped, 08-10-2026. */
	#ku-personalization-modal-banner .ku-personalization-crop-col-controls {
		flex: 1 1 auto;
		width: 100%;
	}
}

/* Stacked vertically (was a space-between row) so "Choose a photo" and
 * "Reset to default image" read cleanly in the narrow controls column
 * instead of crowding a single line. */
.ku-personalization-modal-actions {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
	margin: 0 0 10px;
}

/* Forced 08-10-2026 - same "theme wins without !important" issue as the
 * other four buttons, confirmed live via getComputedStyle on staging:
 * this was rendering as a solid navy filled button instead of the plain
 * red underlined link it's meant to be (a destructive-style text link,
 * not a button - it should not visually compete with Save/Cancel). */
.ku-personalization-reset-btn {
	background: none !important;
	border: none !important;
	color: #b32d2e !important;
	font-size: 13px !important;
	font-weight: 400 !important;
	padding: 0 !important;
	line-height: 1.4 !important;
	min-height: 0 !important;
	height: auto !important;
	box-shadow: none !important;
	border-radius: 0 !important;
	cursor: pointer;
	text-decoration: underline !important;
}

/* Live avatar preview - added 08-10-2026. Redrawn by
 * ku-personalization-crop.js every time the crop box moves or resizes.
 * Rounded square (not a circle) to match how the World avatar actually
 * displays sitewide - see .ku-personalization-thumb-avatar above. Avatar
 * modal only; the banner modal has no preview element in its markup. */
.ku-personalization-preview-label {
	font-size: 12px;
	font-weight: 600;
	color: #666;
	margin: 0 0 6px;
}

.ku-personalization-preview-canvas {
	display: block;
	width: 140px;
	height: 140px;
	border-radius: 12px;
	background: #f2f2f2;
	border: 1px solid #e0e0e0;
	margin-bottom: 14px;
}

/* Real button styling - added 08-10-2026, strengthened 08-10-2026. These
 * four buttons had no dedicated styling of their own and were falling
 * back to the theme's generic button look - the same "theme applies its
 * own styling to every button" pattern already documented for the
 * TinyMCE toolbar (see coding-rules.md, Protected CSS Sections). A first
 * pass without !important still lost to the theme's own button rules
 * (oversized text, filled-dark look on every button regardless of
 * primary/secondary), so every declaration below is forced the same way
 * the working pattern in ku-dashboard-visibility-tools.css already
 * does it. Colors match the navy already used sitewide (e.g. the World
 * Profile button, the crop handle border above), written directly here
 * rather than pulled from another file's CSS variable so this modal's
 * look never depends on a second stylesheet's load order.
 */
/* Fixed 08-10-2026 - Choose a photo/Cancel used to be the reverse of
 * this (light normal, solid-navy hover), which meant hovering Cancel
 * made it flash into looking exactly like the Save button's normal
 * state instead of reinforcing its own identity. All four buttons now
 * share one normal/hover pattern: solid navy normal, inverts to white
 * with a navy outline on hover. */
/* Added 08-10-2026 - "Choose from Media Library" joins this same
 * shared group rather than reusing the Meetings feature's plainer
 * WP-default button look, so every button inside this modal keeps the
 * one already-proven navy/white pattern (the plain look would otherwise
 * fall right back into the "theme applies its own dark styling"
 * problem this whole file exists to override). The Media Library
 * *picker experience itself* - opening WordPress's own browser and
 * loading the pick straight into the crop tool - reuses the Meetings
 * feature's approach; see ku-personalization-crop.js. */
.ku-personalization-save-btn,
.ku-personalization-reset-confirm-btn,
.ku-personalization-modal-cancel,
.ku-personalization-reset-cancel,
.ku-personalization-choose-file-btn,
.ku-personalization-choose-library-btn {
	background: #122B46 !important;
	border: 1px solid #122B46 !important;
	color: #ffffff !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	padding: 8px 16px !important;
	line-height: 1.4 !important;
	min-height: 0 !important;
	height: auto !important;
	border-radius: 6px !important;
	box-shadow: none !important;
	text-decoration: none !important;
	cursor: pointer;
}

.ku-personalization-save-btn:hover,
.ku-personalization-save-btn:focus,
.ku-personalization-reset-confirm-btn:hover,
.ku-personalization-reset-confirm-btn:focus,
.ku-personalization-modal-cancel:hover,
.ku-personalization-modal-cancel:focus,
.ku-personalization-reset-cancel:hover,
.ku-personalization-reset-cancel:focus,
.ku-personalization-choose-file-btn:hover,
.ku-personalization-choose-file-btn:focus,
.ku-personalization-choose-library-btn:hover,
.ku-personalization-choose-library-btn:focus {
	background: #ffffff !important;
	color: #122B46 !important;
	outline: none !important;
}