/**
 * Extra Fields for ACF — Admin Styles
 */

/* ============================================================
   App Shell
   ============================================================ */

.efacf-app {
	display: flex;
	min-height: calc( 100vh - 32px ); /* below WP admin bar */
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, sans-serif;
	margin-left: -32px; /* offset WP admin menu */	
}

/* ============================================================
   Sidebar
   ============================================================ */

.efacf-sidebar {
	width: 220px;
	flex-shrink: 0;
	background: #1e2340;
	display: flex;
	flex-direction: column;
}

.efacf-sidebar-brand {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 24px 20px 20px;
	border-bottom: 1px solid rgba( 255, 255, 255, 0.07 );
	margin-bottom: 8px;
}

.efacf-logo-mark {
	width: 36px;
	height: 36px;
	min-width: 36px;
	background: #3b82f6;
	border-radius: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 19px;
	font-weight: 800;
	color: #fff;
	line-height: 1;
}

.efacf-brand-name {
	font-size: 12px;
	font-weight: 600;
	color: #fff;
	line-height: 1.35;
}

.efacf-brand-version {
	font-size: 11px;
	color: #5c6387;
	margin-top: 2px;
}

.efacf-sidebar-nav {
	flex: 1;
	padding: 4px 12px;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.efacf-nav-item {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 9px 12px;
	border-radius: 6px;
	font-size: 13px;
	color: #7b82a8;
	text-decoration: none;
	transition: background 0.15s, color 0.15s;
	white-space: nowrap;
}

.efacf-nav-item:hover {
	background: rgba( 255, 255, 255, 0.06 );
	color: #c8ceea;
}

.efacf-nav-item.is-active {
	background: rgba( 59, 130, 246, 0.15 );
	color: #93c5fd;
}

.efacf-nav-item svg {
	flex-shrink: 0;
}

.efacf-sidebar-footer {
	padding: 16px 20px;
	border-top: 1px solid rgba( 255, 255, 255, 0.06 );
	font-size: 11.5px;
	color: #3e4563;
	line-height: 1.5;
}

.efacf-sidebar-footer a {
	color: #5c6387;
	text-decoration: none;
}

.efacf-sidebar-footer a:hover {
	color: #93c5fd;
}

/* ============================================================
   Main Area
   ============================================================ */

.efacf-main {
	flex: 1;
	display: flex;
	flex-direction: column;
	min-width: 0;
	background: #f4f5f7;
}

/* Topbar */
.efacf-topbar {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	padding: 0 28px;
	height: 52px;
	background: #fff;
	border-bottom: 1px solid #e5e7eb;
	flex-shrink: 0;
}

.efacf-topbar-right {
	display: flex;
	align-items: center;
	gap: 14px;
}

.efacf-badge {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 5px 13px;
	border-radius: 20px;
	font-size: 12px;
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
}

.efacf-badge-pro {
	background: #1d4ed8;
	color: #fff;
}

.efacf-badge-upgrade {
	background: #f59e0b;
	color: #fff;
}

.efacf-badge-upgrade:hover {
	background: #d97706;
	color: #fff;
}

.efacf-help-link {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: 13px;
	color: #4b5563;
	text-decoration: none;
}

.efacf-help-link:hover {
	color: #111827;
}

/* Scrollable content */
.efacf-content {
	flex: 1;
	overflow-y: auto;
	padding: 28px 28px 48px;
}

.efacf-content-header {
	margin-bottom: 22px;
}

.efacf-content-header h1 {
	font-size: 22px;
	font-weight: 700;
	color: #111827;
	margin: 0 0 6px;
	padding: 0;
	line-height: 1.3;
	border: none;
}

.efacf-content-header p {
	font-size: 13.5px;
	color: #6b7280;
	margin: 0;
}

/* ============================================================
   Table Controls
   ============================================================ */

.efacf-table-controls {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-bottom: 12px;
}

.efacf-search {
	width: 280px;
	height: 36px;
	padding: 0 12px;
	border: 1px solid #d1d5db;
	border-radius: 6px;
	font-size: 13px;
	color: #111827;
	background: #fff;
	outline: none;
	box-shadow: none;
	appearance: none;
}

.efacf-search:focus {
	border-color: #3b82f6;
	box-shadow: 0 0 0 3px rgba( 59, 130, 246, 0.12 );
}

.efacf-field-count {
	font-size: 12.5px;
	color: #9ca3af;
}

/* ============================================================
   Field List (flex/grid — no tables)
   ============================================================ */

.efacf-table-wrap {
	background: #fff;
	border-radius: 10px;
	border: 1px solid #e5e7eb;
	overflow: hidden;
}

/* Shared grid template for header + rows */
.efacf-fields-header,
.efacf-field-row {
	display: grid;
	grid-template-columns: 350px 110px 1fr 80px 32px;
	align-items: center;
	padding: 0 16px;
	gap: 0;
}

.efacf-fields-header {
	padding-top: 10px;
	padding-bottom: 10px;
	background: #f9fafb;
	border-bottom: 1px solid #e5e7eb;
}

.efacf-fields-header > div {
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.07em;
	color: #9ca3af;
}

.efacf-field-row {
	padding-top: 14px;
	padding-bottom: 14px;
	border-bottom: 1px solid #f3f4f6;
	transition: background 0.1s;
}

.efacf-field-row:last-child {
	border-bottom: none;
}

.efacf-field-row:hover {
	background: #fafafa;
}

/* Field name cell */
.efacf-field-name-wrap {
	display: flex;
	align-items: center;
	gap: 12px;
}

.efacf-field-icon-box {
	width: 36px;
	height: 36px;
	min-width: 36px;
	border-radius: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.efacf-field-icon-box img {
	width: 20px;
	height: 20px;
	display: block;
}

.efacf-field-name-wrap strong {
	font-size: 13.5px;
	font-weight: 600;
	color: #111827;
}

/* Category badges */
.efacf-category-tag {
	display: inline-block;
	padding: 3px 10px;
	border-radius: 20px;
	font-size: 11.5px;
	font-weight: 600;
	white-space: nowrap;
}

.efacf-cat-content {
	background: #dbeafe;
	color: #1d4ed8;
}

.efacf-cat-design {
	background: #ede9fe;
	color: #6d28d9;
}

.efacf-cat-data {
	background: #dcfce7;
	color: #15803d;
}

.efacf-cat-basic {
	background: #f3f4f6;
	color: #374151;
}

/* Description */
.efacf-field-description {
	font-size: 13px;
	color: #6b7280;
	line-height: 1.45;
}

/* Toggle switch */
.efacf-toggle {
	position: relative;
	display: inline-block;
	width: 44px;
	height: 24px;
	cursor: pointer;
}

.efacf-toggle input[type="checkbox"] {
	opacity: 0;
	width: 0;
	height: 0;
	position: absolute;
}

.efacf-toggle-slider {
	position: absolute;
	inset: 0;
	background: #d1d5db;
	border-radius: 24px;
	transition: background 0.2s;
}

.efacf-toggle-slider::before {
	content: '';
	position: absolute;
	width: 18px;
	height: 18px;
	left: 3px;
	top: 3px;
	background: #fff;
	border-radius: 50%;
	transition: transform 0.2s;
	box-shadow: 0 1px 3px rgba( 0, 0, 0, 0.15 );
}

.efacf-toggle input:checked + .efacf-toggle-slider {
	background: #3b82f6;
}

.efacf-toggle input:checked + .efacf-toggle-slider::before {
	transform: translateX( 20px );
}

.efacf-toggle input:focus-visible + .efacf-toggle-slider {
	outline: 2px solid #3b82f6;
	outline-offset: 2px;
}

/* Chevron */
.efacf-col-arrow svg {
	color: #d1d5db;
	display: block;
}

/* No results */
.efacf-no-results {
	padding: 24px;
	text-align: center;
	color: #9ca3af;
	font-size: 13px;
	margin: 0;
}

/* ============================================================
   Form Footer
   ============================================================ */

.efacf-form-footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: 20px;
}

.efacf-save-notice {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 12.5px;
	color: #6b7280;
	margin: 0;
}

.efacf-save-notice svg {
	flex-shrink: 0;
	color: #10b981;
}

.efacf-form-actions {
	display: flex;
	align-items: center;
	gap: 10px;
}

.efacf-btn-reset.button {
	height: 36px;
	line-height: 34px;
	padding: 0 16px;
	border-color: #d1d5db;
	color: #374151;
	background: #fff;
	border-radius: 6px;
	font-size: 13px;
	box-shadow: none;
}

.efacf-btn-reset.button:hover {
	border-color: #9ca3af;
	background: #f9fafb;
	color: #111827;
}

.efacf-btn-save.button-primary {
	height: 36px;
	line-height: 34px;
	padding: 0 20px;
	background: #3b82f6;
	border-color: #3b82f6;
	border-radius: 6px;
	font-size: 13px;
	box-shadow: none;
}

.efacf-btn-save.button-primary:hover,
.efacf-btn-save.button-primary:focus {
	background: #2563eb;
	border-color: #2563eb;
	box-shadow: none;
	outline: none;
}

/* ============================================================
   Toast Notification
   ============================================================ */

.efacf-toast {
	position: fixed;
	top: 100px;
	right: 24px;
	z-index: 999999;
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 12px 18px;
	background: #111827;
	color: #f9fafb;
	border-radius: 8px;
	font-size: 13px;
	font-weight: 500;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, sans-serif;
	box-shadow: 0 4px 16px rgba( 0, 0, 0, 0.18 );
	transform: translateX( calc( 100% + 32px ) );
	transition: transform 0.3s cubic-bezier( 0.34, 1.56, 0.64, 1 );
	pointer-events: none;
	max-width: 300px;
	white-space: nowrap;
}

.efacf-toast.is-visible {
	transform: translateX( 0 );
	pointer-events: auto;
}

.efacf-toast.is-error {
	background: #dc2626;
}

.efacf-toast svg {
	flex-shrink: 0;
}

/* ============================================================
   Inline Pro Badge
   ============================================================ */

.efacf-pro-notice {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 6px 10px;
	background: #fef9c3;
	border: 1px solid #fde047;
	border-radius: 3px;
	font-size: 12px;
}

.efacf-pro-tag {
	font-weight: 700;
	color: #854d0e;
}

.efacf-pro-link {
	font-weight: 600;
	color: #1d4ed8;
	text-decoration: none;
}

/* ============================================================
   Field Inputs (ACF field type UI styles)
   ============================================================ */

/* Unit Control */
.acf-field-unit-control .acf-input-wrap {
	display: flex;
	align-items: center;
}

.acf-field-unit-control .acf-input-wrap input[type="number"] {
	flex: 1;
	margin-right: 8px;
}

.acf-field-unit-control .acf-input-wrap select {
	width: 80px;
}

.acf-field-unit-control .acf-input-preview {
	margin-top: 8px;
	padding: 6px 10px;
	background: #f9f9f9;
	border: 1px solid #ddd;
	border-radius: 3px;
	font-family: monospace;
}

/* Gradient Picker */
.acf-field-gradient-picker .acf-gradient-controls {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-bottom: 12px;
}

.acf-field-gradient-picker .acf-gradient-color {
	flex: 1;
	min-width: 120px;
}

.acf-field-gradient-picker .acf-gradient-direction {
	flex: 1;
	min-width: 180px;
}

.acf-field-gradient-picker .acf-gradient-preview {
	height: 60px;
	border-radius: 4px;
	margin-top: 8px;
	border: 1px solid #ddd;
}

/* Responsive Range */
.acf-field-responsive-range .acf-responsive-tabs {
	display: flex;
	margin-bottom: 8px;
}

.acf-field-responsive-range .acf-responsive-tab {
	padding: 8px 12px;
	margin-right: 4px;
	background: #f5f5f5;
	border: 1px solid #ddd;
	border-radius: 3px 3px 0 0;
	cursor: pointer;
}

.acf-field-responsive-range .acf-responsive-tab.active {
	background: #fff;
	border-bottom-color: #fff;
}

.acf-field-responsive-range .acf-responsive-tab i {
	margin-right: 4px;
}

.acf-field-responsive-range .acf-responsive-content {
	border: 1px solid #ddd;
	padding: 12px;
	background: #fff;
}

.acf-field-responsive-range .acf-range-wrap {
	display: flex;
	align-items: center;
}

.acf-field-responsive-range .acf-range-input {
	flex: 1;
	margin-right: 8px;
}

.acf-field-responsive-range .acf-range-value {
	width: 60px;
	margin-right: 8px;
}

.acf-field-responsive-range .acf-range-unit {
	width: 60px;
}

/* Date Range Picker */
.acf-field-date-range .acf-date-range-wrap {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.acf-field-date-range .acf-date-range-start,
.acf-field-date-range .acf-date-range-end {
	flex: 1;
	min-width: 200px;
}

.acf-field-date-range .acf-date-range-label {
	display: block;
	margin-bottom: 5px;
	font-weight: 600;
}

.acf-field-date-range .acf-date-range-error {
	color: #d63638;
	margin-top: 8px;
	font-size: 12px;
}

/* --- Pro field locked row ------------------------------------ */
.efacf-field-row--locked {
	opacity: 0.7;
}
.efacf-field-row--locked .efacf-field-icon-box {
	filter: grayscale(0.3);
}
.efacf-pro-badge-inline {
	display: inline-block;
	font-size: 10px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .5px;
	padding: 1px 5px;
	border-radius: 3px;
	background: #f0b429;
	color: #7c4e00;
	vertical-align: middle;
	margin-left: 4px;
}
.efacf-toggle-upgrade {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: 12px;
	font-weight: 600;
	color: #8c5a00;
	background: #fef3c7;
	border: 1px solid #f0b429;
	border-radius: 4px;
	padding: 3px 10px;
	text-decoration: none;
	transition: background 0.15s;
}
.efacf-toggle-upgrade:hover {
	background: #fde68a;
	color: #78350f;
}