/**
 * Known Universe - Design Card: Access Content Order/Title/Image accordion
 *
 * Layout only for the row-per-section list in the Access Content order/
 * title/image accordion (the third accordion on a World's Design
 * dashboard card, class-ku-design-card.php). Table header/row styling
 * comes from the shared table.ku-dashboard-table rules already in
 * ku-dashboard-shared.css (the same base the front-end Visibility tables
 * use) - this file only adds the column-width and button-size tweaks this
 * six-row list needs on top of that.
 *
 * Created 2026-08-13. Rebuilt 2026-08-13 per Dianne's second round of
 * feedback: match the Visibility table look, fix button sizing, and add a
 * plugin-controlled "View Default Image" modal.
 */

#ku-design-ac-order-accordion {
	margin-top: 0.75rem;
}

.ku-ac-order-intro {
	margin: 0 0 0.75rem;
	font-size: 13px;
	color: #555;
}

#ku-ac-order-toolbar {
	margin-bottom: 10px;
}

/* Buttons scoped to just this accordion - the theme's front-end .button
   styling (large padding, larger font) is fine everywhere else; this
   accordion just needs a tighter version, without changing .button
   anywhere else on the site. */
#ku-design-ac-order-accordion .button,
#ku-design-ac-order-accordion .button-link {
	padding: 4px 10px !important;
	font-size: 13px !important;
	line-height: 1.4 !important;
	min-height: 0 !important;
	height: auto !important;
	box-shadow: none !important;
}

/* Higher specificity than table.ku-dashboard-table tbody td
   (ku-dashboard-shared.css), which sets vertical-align: top and was
   winning over the plain .ku-ac-order-table td rule this replaced -
   confirmed 08-13-2026 as why the Section column sat top-aligned
   while the Move button (aligned by ku-move-cell's own !important
   rule) centered. Also sets table-layout: fixed so the Order/Image
   columns keep fixed widths and the extra room goes to Actions
   instead of being spread evenly across all five columns, which was
   crowding Actions and wrapping its button text. */
table.ku-ac-order-table {
	table-layout: fixed;
	width: 100%;
}

table.ku-ac-order-table tbody td {
	vertical-align: middle !important;
}

.ku-ac-order-table th:nth-child(2),
.ku-ac-order-table td:nth-child(2) {
	width: 260px;
}

.ku-ac-order-table th:nth-child(3),
.ku-ac-order-table td:nth-child(3) {
	width: 400px;
}

.ku-ac-order-table th:nth-child(4),
.ku-ac-order-table td:nth-child(4) {
	width: 120px;
}

.ku-ac-order-table td:nth-child(3) {
	padding-right: 28px;
}

.ku-ac-title-field {
	display: flex;
	align-items: center;
	flex-wrap: nowrap;
	gap: 8px;
}

.ku-ac-title-input {
	width: 100%;
	max-width: 250px;
	font-size: 13px;
	flex: 1 1 auto;
	min-width: 0;
}

.ku-ac-title-reset-btn {
	font-size: 12px;
	white-space: nowrap;
	flex: 0 0 auto;
}

.ku-ac-image-cell {
	text-align: center;
	width: 120px;
}

.ku-ac-image-thumb {
	width: 80px;
	height: 80px;
	object-fit: cover;
	border-radius: 4px;
	border: 1px solid #ddd;
}

div.ku-ac-image-thumb.ku-personalization-empty-thumb {
	width: 80px;
	height: 80px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 9px;
	text-align: center;
	padding: 2px;
}

.ku-ac-actions-inner {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 6px;
}

.ku-ac-view-default-btn {
	font-size: 12px;
}

.ku-ac-order-actions {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-top: 0.75rem;
}

.ku-ac-hidden {
	display: none;
}

/* Wider Update Image modal for this accordion only - "Publish to Live" is
   longer than Avatar/Banner's "Save", which was wrapping inside the
   700px default width. Same scoped-widening pattern already used for the
   Banner modal (#ku-personalization-modal-banner) in
   ku-setup-personalization.css. */
.ku-ac-wide-modal .ku-personalization-modal-inner {
	max-width: 850px;
}

/* Modal heading and Preview label - scoped to this accordion's modals
   only, per Dianne's 08-13-2026 feedback (heading read as not-bold, the
   Preview label was hard to read at 12px). Not touching the shared,
   unscoped .ku-personalization-preview-label rule in
   ku-setup-personalization.css - that still governs Avatar/Banner/Admin,
   none of which were flagged. !important matches the established pattern
   in that same file for this exact "theme wins without !important" issue. */
.ku-ac-wide-modal h3 {
	font-weight: 700 !important;
}

.ku-ac-wide-modal .ku-personalization-preview-label {
	font-size: 16px !important;
	font-weight: 700 !important;
}

/* "Publish to Live" is longer than "Save" and was still wrapping onto two
   lines even after widening the modal - the button itself needs to stay
   on one line, not just have more room around it. */
.ku-ac-wide-modal .ku-personalization-save-btn,
.ku-ac-wide-modal .ku-personalization-modal-cancel {
	white-space: nowrap;
}

/* View Default Image - a small, read-only, plugin-styled modal (not
   Elementor's sitewide lightbox, which this plugin doesn't control the
   styling of). One shared instance reused for all six sections; JS swaps
   the image src and label per click. */
.ku-ac-default-image-modal {
	display: none;
	position: fixed;
	inset: 0;
	background: rgba( 0, 0, 0, 0.6 );
	z-index: 100000;
	align-items: center;
	justify-content: center;
}

.ku-ac-default-image-modal-inner {
	background: #ffffff;
	border-radius: 6px;
	padding: 24px;
	max-width: 480px;
	width: 92%;
	max-height: 90vh;
	overflow-y: auto;
	position: relative;
	text-align: center;
}

.ku-ac-default-image-modal-title {
	margin: 0 0 12px;
	font-size: 15px;
	font-weight: 600;
	color: #122B46;
}

.ku-ac-default-image-modal-img {
	max-width: 100%;
	max-height: 60vh;
	border-radius: 4px;
}

.ku-ac-default-image-modal-close {
	position: absolute;
	top: 10px;
	right: 14px;
	background: none;
	border: none;
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
	color: #122B46;
}

/* Preview button status line (Design Document v3, section 12) - added
   08-13-2026. Reused for both the accordion's own Preview button and,
   inside each modal, .ku-personalization-modal-status (already existed,
   not a new class) shows the same kind of message in that context. */
.ku-ac-preview-status {
	font-size: 12px;
	color: #555;
	margin: 6px 0 0;
}