/**
 * Phantom Cabinets Dashboard Styles
 *
 * Styles for Nelson Dashboard integration.
 * Uses nd-* classes for Nelson Dashboard compatibility
 * and phantom-* classes for plugin-specific styling.
 *
 * @package Phantom\Cabinets
 */

/* ==========================================================================
   Nelson Dashboard Section Overrides
   ========================================================================== */

.nd-section--phantom-cabinets {
	padding: 0;
}

.nd-section--phantom-cabinets .nd-section-header {
	margin-bottom: 2rem;
}

.nd-section--phantom-cabinets .nd-section-title {
	font-size: 1.75rem;
	font-weight: 600;
	margin: 0 0 0.5rem;
	color: var(--nd-text-primary, #1a1a1a);
}

.nd-section--phantom-cabinets .nd-section-description {
	color: var(--nd-text-secondary, #666);
	margin: 0;
	font-size: 1rem;
}

/* ==========================================================================
   Form Styles (Nelson Dashboard Compatible)
   ========================================================================== */

.nd-section--phantom-cabinets .nd-form {
	max-width: 700px;
}

.nd-section--phantom-cabinets .nd-form-group {
	margin-bottom: 1.5rem;
}

.nd-section--phantom-cabinets .nd-label {
	display: block;
	font-weight: 600;
	margin-bottom: 0.5rem;
	color: var(--nd-text-primary, #1a1a1a);
}

.nd-section--phantom-cabinets .nd-required {
	color: var(--nd-danger, #d63638);
	margin-left: 2px;
}

.nd-section--phantom-cabinets .nd-input,
.nd-section--phantom-cabinets .nd-textarea,
.nd-section--phantom-cabinets .nd-select {
	width: 100%;
	padding: 0.75rem 1rem;
	border: 1px solid var(--nd-border, #ddd);
	border-radius: var(--nd-radius, 6px);
	font-size: 1rem;
	font-family: inherit;
	background: var(--nd-bg, #fff);
	transition: border-color 0.2s, box-shadow 0.2s;
}

.nd-section--phantom-cabinets .nd-input:focus,
.nd-section--phantom-cabinets .nd-textarea:focus,
.nd-section--phantom-cabinets .nd-select:focus {
	border-color: var(--nd-primary, #667eea);
	outline: none;
	box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.15);
}

.nd-section--phantom-cabinets .nd-field-hint {
	margin-top: 0.5rem;
	font-size: 0.875rem;
	color: var(--nd-text-muted, #888);
}

/* Checkbox/Radio Group */
.nd-section--phantom-cabinets .nd-checkbox-group {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
}

.nd-section--phantom-cabinets .nd-checkbox-label {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-weight: normal;
	cursor: pointer;
	padding: 0.5rem 0.75rem;
	border: 1px solid var(--nd-border, #ddd);
	border-radius: var(--nd-radius, 6px);
	transition: border-color 0.2s, background 0.2s;
}

.nd-section--phantom-cabinets .nd-checkbox-label:hover {
	border-color: var(--nd-primary, #667eea);
	background: rgba(102, 126, 234, 0.05);
}

.nd-section--phantom-cabinets .nd-checkbox-label:has(.nd-checkbox:checked) {
	border-color: var(--nd-primary, #667eea);
	background: rgba(102, 126, 234, 0.1);
}

/* Form Actions */
.nd-section--phantom-cabinets .nd-form-actions {
	display: flex;
	align-items: center;
	gap: 1rem;
	padding-top: 1.5rem;
	margin-top: 1.5rem;
	border-top: 1px solid var(--nd-border-light, #eee);
}

.nd-section--phantom-cabinets .nd-form-message {
	font-size: 0.9rem;
}

.nd-section--phantom-cabinets .nd-form-message.success {
	color: var(--nd-success, #00a32a);
}

.nd-section--phantom-cabinets .nd-form-message.error {
	color: var(--nd-danger, #d63638);
}

/* ==========================================================================
   Button Styles (Nelson Dashboard Compatible)
   ========================================================================== */

.nd-section--phantom-cabinets .nd-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	padding: 0.75rem 1.25rem;
	border: 1px solid transparent;
	border-radius: var(--nd-radius, 6px);
	font-size: 0.95rem;
	font-weight: 500;
	font-family: inherit;
	text-decoration: none;
	cursor: pointer;
	transition: all 0.2s;
	white-space: nowrap;
}

.nd-section--phantom-cabinets .nd-button--primary {
	background: linear-gradient(135deg, var(--nd-primary, #667eea) 0%, var(--nd-primary-dark, #764ba2) 100%);
	color: #fff;
	border-color: var(--nd-primary, #667eea);
}

.nd-section--phantom-cabinets .nd-button--primary:hover {
	background: linear-gradient(135deg, #5a6fd6 0%, #6a4190 100%);
	transform: translateY(-1px);
	box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

.nd-section--phantom-cabinets .nd-button--secondary {
	background: var(--nd-bg, #fff);
	color: var(--nd-text-primary, #333);
	border-color: var(--nd-border, #ddd);
}

.nd-section--phantom-cabinets .nd-button--secondary:hover {
	background: var(--nd-bg-hover, #f5f5f5);
	border-color: var(--nd-border-dark, #ccc);
}

.nd-section--phantom-cabinets .nd-button--text {
	background: transparent;
	color: var(--nd-text-secondary, #666);
	padding: 0.5rem 0.75rem;
}

.nd-section--phantom-cabinets .nd-button--text:hover {
	color: var(--nd-primary, #667eea);
	background: rgba(102, 126, 234, 0.05);
}

.nd-section--phantom-cabinets .nd-button--danger {
	background: transparent;
	color: var(--nd-danger, #d63638);
	border-color: var(--nd-danger, #d63638);
}

.nd-section--phantom-cabinets .nd-button--danger:hover {
	background: var(--nd-danger, #d63638);
	color: #fff;
}

.nd-section--phantom-cabinets .nd-button--small {
	padding: 0.375rem 0.75rem;
	font-size: 0.85rem;
}

.nd-section--phantom-cabinets .nd-button.loading {
	opacity: 0.7;
	cursor: not-allowed;
	pointer-events: none;
}

.nd-section--phantom-cabinets .nd-button-group {
	display: flex;
	gap: 0.5rem;
	flex-wrap: wrap;
}

/* ==========================================================================
   Image Upload Styles
   ========================================================================== */

.phantom-image-upload {
	display: flex;
	align-items: flex-start;
	gap: 1rem;
}

.phantom-image-preview {
	width: 120px;
	height: 120px;
	border: 2px dashed var(--nd-border, #ddd);
	border-radius: var(--nd-radius, 6px);
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	background: var(--nd-bg-muted, #f9f9f9);
	flex-shrink: 0;
}

.phantom-image-preview img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.phantom-image-preview.has-image {
	border-style: solid;
	border-color: var(--nd-border, #ddd);
}

.phantom-image-buttons {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

/* ==========================================================================
   Gallery Upload Styles
   ========================================================================== */

.phantom-gallery-upload {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.phantom-gallery-items {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
}

.phantom-gallery-item {
	position: relative;
	width: 80px;
	height: 80px;
	border: 1px solid var(--nd-border, #ddd);
	border-radius: var(--nd-radius, 6px);
	overflow: hidden;
	background: var(--nd-bg-muted, #f9f9f9);
}

.phantom-gallery-item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.phantom-gallery-item .phantom-remove-gallery-item {
	position: absolute;
	top: 4px;
	right: 4px;
	width: 22px;
	height: 22px;
	padding: 0;
	border: none;
	border-radius: 50%;
	background: var(--nd-danger, #d63638);
	color: #fff;
	font-size: 14px;
	line-height: 1;
	cursor: pointer;
	opacity: 0;
	transition: opacity 0.2s;
	display: flex;
	align-items: center;
	justify-content: center;
}

.phantom-gallery-item:hover .phantom-remove-gallery-item {
	opacity: 1;
}

/* ==========================================================================
   Table Styles (Nelson Dashboard Compatible)
   ========================================================================== */

.nd-section--phantom-cabinets .nd-card {
	background: var(--nd-bg, #fff);
	border: 1px solid var(--nd-border-light, #eee);
	border-radius: var(--nd-radius-lg, 8px);
	overflow: hidden;
}

.nd-section--phantom-cabinets .nd-card__body {
	padding: 0;
}

.nd-section--phantom-cabinets .nd-table {
	width: 100%;
	border-collapse: collapse;
}

.nd-section--phantom-cabinets .nd-table th,
.nd-section--phantom-cabinets .nd-table td {
	padding: 1rem;
	text-align: left;
	border-bottom: 1px solid var(--nd-border-light, #eee);
}

.nd-section--phantom-cabinets .nd-table th {
	font-weight: 600;
	font-size: 0.85rem;
	text-transform: uppercase;
	letter-spacing: 0.025em;
	color: var(--nd-text-secondary, #666);
	background: var(--nd-bg-muted, #f9f9f9);
}

.nd-section--phantom-cabinets .nd-table tbody tr:hover {
	background: var(--nd-bg-hover, #f5f5f5);
}

.nd-section--phantom-cabinets .nd-table__title {
	font-weight: 600;
	color: var(--nd-text-primary, #1a1a1a);
}

/* Column widths */
.nd-section--phantom-cabinets .column-thumbnail {
	width: 80px;
}

.nd-section--phantom-cabinets .column-status {
	width: 100px;
}

.nd-section--phantom-cabinets .column-modified {
	width: 120px;
}

.nd-section--phantom-cabinets .column-actions {
	width: auto;
	white-space: nowrap;
}

/* Thumbnail styles */
.nd-section--phantom-cabinets .nd-thumbnail {
	width: 60px;
	height: 60px;
	object-fit: cover;
	border-radius: var(--nd-radius, 6px);
}

.nd-section--phantom-cabinets .nd-thumbnail-placeholder {
	width: 60px;
	height: 60px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--nd-bg-muted, #f0f0f0);
	border-radius: var(--nd-radius, 6px);
	color: var(--nd-text-muted, #999);
}

.nd-section--phantom-cabinets .nd-thumbnail-placeholder .dashicons {
	font-size: 24px;
	width: 24px;
	height: 24px;
}

/* ==========================================================================
   Status Badges (Nelson Dashboard Compatible)
   ========================================================================== */

.nd-section--phantom-cabinets .nd-badge {
	display: inline-block;
	padding: 0.25rem 0.75rem;
	border-radius: 20px;
	font-size: 0.8rem;
	font-weight: 500;
}

.nd-section--phantom-cabinets .nd-badge--publish {
	background: var(--nd-success-bg, #d4edda);
	color: var(--nd-success-text, #155724);
}

.nd-section--phantom-cabinets .nd-badge--draft {
	background: var(--nd-warning-bg, #fff3cd);
	color: var(--nd-warning-text, #856404);
}

.nd-section--phantom-cabinets .nd-badge--pending {
	background: var(--nd-info-bg, #cce5ff);
	color: var(--nd-info-text, #004085);
}

/* ==========================================================================
   Empty State (Nelson Dashboard Compatible)
   ========================================================================== */

.nd-section--phantom-cabinets .nd-empty-state {
	text-align: center;
	padding: 4rem 2rem;
	background: var(--nd-bg-muted, #f9f9f9);
	border-radius: var(--nd-radius-lg, 8px);
	border: 2px dashed var(--nd-border, #ddd);
}

.nd-section--phantom-cabinets .nd-empty-state__icon {
	margin-bottom: 1.5rem;
}

.nd-section--phantom-cabinets .nd-empty-state__icon .dashicons {
	font-size: 48px;
	width: 48px;
	height: 48px;
	color: var(--nd-text-muted, #ccc);
}

.nd-section--phantom-cabinets .nd-empty-state__title {
	font-size: 1.25rem;
	font-weight: 600;
	margin: 0 0 0.5rem;
	color: var(--nd-text-primary, #1a1a1a);
}

.nd-section--phantom-cabinets .nd-empty-state__text {
	margin: 0 0 1.5rem;
	color: var(--nd-text-secondary, #666);
}

/* ==========================================================================
   Edit View Header
   ========================================================================== */

.nd-section--phantom-cabinets .nd-section-nav {
	display: flex;
	align-items: center;
	gap: 1rem;
	margin-bottom: 2rem;
	padding-bottom: 1.5rem;
	border-bottom: 1px solid var(--nd-border-light, #eee);
}

.nd-section--phantom-cabinets .nd-section-nav .dashicons {
	font-size: 16px;
	width: 16px;
	height: 16px;
}

.nd-section--phantom-cabinets .nd-section-subtitle {
	margin: 0;
	font-size: 1.25rem;
	font-weight: 600;
	color: var(--nd-text-primary, #1a1a1a);
}

/* ==========================================================================
   Dashboard Notices
   ========================================================================== */

.phantom-dashboard-notice {
	padding: 1rem 1.25rem;
	border-radius: var(--nd-radius, 6px);
	margin-bottom: 1.5rem;
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

.phantom-dashboard-notice.notice-error {
	background: var(--nd-danger-bg, #fce4e4);
	border: 1px solid var(--nd-danger-border, #f5c6cb);
	color: var(--nd-danger-text, #721c24);
}

.phantom-dashboard-notice.notice-success {
	background: var(--nd-success-bg, #d4edda);
	border: 1px solid var(--nd-success-border, #c3e6cb);
	color: var(--nd-success-text, #155724);
}

/* ==========================================================================
   Responsive Styles
   ========================================================================== */

@media (max-width: 768px) {
	.nd-section--phantom-cabinets .nd-table {
		display: block;
		overflow-x: auto;
	}

	.nd-section--phantom-cabinets .column-subject,
	.nd-section--phantom-cabinets .column-modified {
		display: none;
	}

	.nd-section--phantom-cabinets .nd-form-actions {
		flex-direction: column;
		align-items: stretch;
	}

	.nd-section--phantom-cabinets .nd-button {
		width: 100%;
	}

	.nd-section--phantom-cabinets .nd-section-nav {
		flex-direction: column;
		align-items: flex-start;
	}

	.phantom-image-upload {
		flex-direction: column;
	}

	.nd-section--phantom-cabinets .nd-checkbox-group {
		flex-direction: column;
	}

	.nd-section--phantom-cabinets .nd-button-group {
		flex-direction: column;
		width: 100%;
	}

	.nd-section--phantom-cabinets .nd-button-group .nd-button {
		width: 100%;
	}
}

/* ==========================================================================
   Configurator Interface Styles
   ========================================================================== */

/* Section Divider */
.nd-section--phantom-cabinets .nd-section-divider {
	height: 1px;
	background: var(--nd-border-light, #eee);
	margin: 2rem 0;
}

/* Form Section */
.nd-section--phantom-cabinets .nd-form-section {
	margin-top: 2rem;
}

.nd-section--phantom-cabinets .nd-form-section-title {
	font-size: 1.25rem;
	font-weight: 600;
	margin: 0 0 0.5rem;
	color: var(--nd-text-primary, #1a1a1a);
}

.nd-section--phantom-cabinets .nd-form-section-description {
	color: var(--nd-text-secondary, #666);
	margin: 0 0 1.5rem;
	font-size: 0.95rem;
}

/* Build Loader */
.phantom-build-loader {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 2rem;
	text-align: center;
	justify-content: center;
	color: var(--nd-text-secondary, #666);
	background: var(--nd-bg-muted, #f9f9f9);
	border-radius: var(--nd-radius, 6px);
}

.phantom-build-loader .spinner {
	width: 20px;
	height: 20px;
	border: 2px solid var(--nd-border, #ddd);
	border-top-color: var(--nd-primary, #667eea);
	border-radius: 50%;
	animation: phantom-spin 0.8s linear infinite;
}

@keyframes phantom-spin {
	to {
		transform: rotate(360deg);
	}
}

/* Build Error */
.phantom-build-error {
	padding: 1rem;
	background: var(--nd-danger-bg, #fce4e4);
	border: 1px solid var(--nd-danger-border, #f5c6cb);
	border-radius: var(--nd-radius, 6px);
	color: var(--nd-danger-text, #721c24);
}

/* Build Form */
.phantom-build-form {
	/* Container for configurator */
}

/* Build Sections */
.phantom-build-section {
	margin-bottom: 2rem;
}

.phantom-build-section-title {
	font-size: 1.1rem;
	font-weight: 600;
	margin: 0 0 1rem;
	color: var(--nd-text-primary, #1a1a1a);
	padding-bottom: 0.5rem;
	border-bottom: 2px solid var(--nd-primary, #667eea);
}

/* Components & Options Lists */
.phantom-components-list,
.phantom-options-list {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

/* Option Group Cards */
.phantom-option-group.nd-card {
	border: 1px solid var(--nd-border, #ddd);
	border-radius: var(--nd-radius, 6px);
	overflow: hidden;
}

.phantom-option-group .nd-card__header {
	padding: 0.875rem 1rem;
	background: var(--nd-bg-muted, #f9f9f9);
	border-bottom: 1px solid var(--nd-border-light, #eee);
}

.phantom-option-group .nd-card__title {
	margin: 0;
	font-size: 1rem;
	font-weight: 600;
	color: var(--nd-text-primary, #1a1a1a);
}

.phantom-option-group .nd-card__body {
	padding: 1rem;
}

/* Radio & Checkbox Groups */
.phantom-radio-group,
.phantom-checkbox-group {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

/* Option Items */
.phantom-option-item {
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
	padding: 0.875rem 1rem;
	border: 1px solid var(--nd-border-light, #eee);
	border-radius: var(--nd-radius, 6px);
	cursor: pointer;
	transition: all 0.2s;
	background: var(--nd-bg, #fff);
}

.phantom-option-item:hover {
	border-color: var(--nd-primary, #667eea);
	background: rgba(102, 126, 234, 0.03);
}

.phantom-option-item:has(input:checked) {
	border-color: var(--nd-primary, #667eea);
	background: rgba(102, 126, 234, 0.08);
}

.phantom-option-item input[type="radio"],
.phantom-option-item input[type="checkbox"] {
	margin-top: 3px;
	flex-shrink: 0;
}

.phantom-option-content {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
}

.phantom-option-content strong {
	font-weight: 600;
	color: var(--nd-text-primary, #1a1a1a);
}

.phantom-option-desc {
	font-size: 0.875rem;
	color: var(--nd-text-secondary, #666);
	line-height: 1.4;
}

/* Build Field */
.phantom-build-field {
	background: var(--nd-bg-muted, #f9f9f9);
	border: 1px solid var(--nd-border-light, #eee);
	border-radius: var(--nd-radius, 6px);
	padding: 1rem;
}

.phantom-build-field .nd-label {
	margin-bottom: 0.25rem;
}

.phantom-build-field .nd-select {
	margin-top: 0.5rem;
}

/* Build Actions */
.phantom-build-actions {
	margin-top: 1rem;
	display: flex;
	align-items: center;
	gap: 1rem;
}

.phantom-build-actions .nd-button .dashicons {
	font-size: 16px;
	width: 16px;
	height: 16px;
}

/* Notice Styles */
.nd-notice {
	padding: 1rem 1.25rem;
	border-radius: var(--nd-radius, 6px);
	margin-bottom: 1rem;
}

.nd-notice--error {
	background: var(--nd-danger-bg, #fce4e4);
	border: 1px solid var(--nd-danger-border, #f5c6cb);
	color: var(--nd-danger-text, #721c24);
}

.nd-notice--success {
	background: var(--nd-success-bg, #d4edda);
	border: 1px solid var(--nd-success-border, #c3e6cb);
	color: var(--nd-success-text, #155724);
}

/* Description text */
.nd-description {
	color: var(--nd-text-secondary, #666);
	font-size: 0.95rem;
	padding: 1rem;
	background: var(--nd-bg-muted, #f9f9f9);
	border-radius: var(--nd-radius, 6px);
	text-align: center;
}

/* Configurator Section within form */
.phantom-configurator-section {
	margin-top: 2rem;
	padding-top: 1rem;
}

.phantom-configurator-section .nd-form-group {
	max-width: 100%;
}

/* Responsive Configurator Styles */
@media (max-width: 768px) {
	.phantom-option-item {
		padding: 0.75rem;
	}

	.phantom-build-section-title {
		font-size: 1rem;
	}

	.phantom-option-group .nd-card__body {
		padding: 0.75rem;
	}
}

/* ==========================================================================
   Legacy Support (keep existing phantom-* classes working)
   ========================================================================== */

.phantom-dashboard-section:not(.nd-section--phantom-cabinets) {
	padding: 20px 0;
}

.phantom-dashboard-section:not(.nd-section--phantom-cabinets) .phantom-dashboard-header h2 {
	margin: 0 0 10px 0;
	font-size: 1.5em;
}

.phantom-dashboard-section:not(.nd-section--phantom-cabinets) .phantom-form-row label .required {
	color: #d63638;
}