/**
 * Docs Publisher for Confluence - Admin Styles
 * Custom CSS (No Tailwind)
 */

/* ===== FONT FACE DECLARATIONS ===== */
@font-face {
	font-family: 'Inter';
	src: url('fonts/Inter-Regular.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Inter';
	src: url('fonts/Inter-Medium.woff2') format('woff2');
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Inter';
	src: url('fonts/Inter-SemiBold.woff2') format('woff2');
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}

/* ===== CSS VARIABLES ===== */
:root {
	--color-primary: #2b6cee;
	--color-primary-hover: #1e5dd8;
	--color-primary-light: rgba(43, 108, 238, 0.1);
	--color-primary-border: rgba(43, 108, 238, 0.2);
	
	/* Light Theme Colors */
	--color-bg-light: #f6f6f8;
	--color-surface-light: #ffffff;
	--color-border-light: #e2e8f0;
	--color-text-main-light: #111318;
	--color-text-sub-light: #4b5563;
	
	/* Status Colors */
	--color-success: #10b981;
	--color-success-light: #d1fae5;
	--color-error: #ef4444;
	--color-error-light: #fee2e2;
	--color-warning: #f59e0b;
	--color-warning-light: #fef3c7;
}

/* ===== BASE STYLES ===== */
/**
 * Root container for all plugin UI components.
 * This wrapper ensures all plugin content (sidebar, header, content views, settings)
 * is contained within a single root element without interfering with WordPress
 * admin notices (displayed above) or the WordPress admin footer (displayed below).
 */
.dpfcrs-admin-wrapper {
	margin: 0;
	padding: 0;
	font-family: "Inter", sans-serif;
	min-height: calc(100vh - 32px - 36px);
	height: calc(100vh - 32px - 36px);
	width: 100%;
	background-color: var(--color-bg-light);
	color: var(--color-text-main-light);
	transition: background-color 0.2s, color 0.2s;
	-webkit-font-smoothing: antialiased;
	position: relative;
	z-index: 1;
	/* Ensure wrapper doesn't overlap WordPress admin notices or footer */
	overflow: hidden;
	border: 2px solid #e1e6ec;
	border-radius: 0.5rem;
	box-sizing: border-box;
	margin-top: 18px;
}

/* Hide WordPress admin sidebar on plugin pages */
.wp-admin.folded .dpfcrs-admin-wrapper ~ #wpcontent,
.wp-admin .dpfcrs-admin-wrapper ~ #wpcontent {
	margin-left: 0;
}

/* Remove WordPress admin padding when wrapper is present */
.wrap .dpfcrs-admin-wrapper,
#wpbody-content .dpfcrs-admin-wrapper {
	margin-left: -10px;
	margin-right: -10px;
	margin-top: calc(32px - 20px);
	margin-bottom: -20px;
	/* height: calc(100vh - 32px - 36px + 40px); */
	/* min-height: calc(100vh - 32px - 36px + 40px); */
}

/* Ensure WordPress sidebar stays below plugin sidebar */
#adminmenuback,
#adminmenuwrap,
#adminmenu {
	z-index: 9990;
}

.dpfcrs-admin-wrapper ~ .wrap h1,
.dpfcrs-admin-wrapper ~ .wrap .nav-tab-wrapper {
	display: none;
}

/* ===== LAYOUT ===== */
.dpfcrs-layout-flex {
	display: flex;
}

.dpfcrs-layout-flex-col {
	display: flex;
	flex-direction: column;
}

.dpfcrs-layout-flex-row {
	display: flex;
	flex-direction: row;
}

.dpfcrs-layout-min-h-screen {
	min-height: 100%;
	height: 100%;
	align-items: stretch;
}

.dpfcrs-layout-flex-1 {
	flex: 1;
}

.dpfcrs-layout-flex-wrap {
	flex-wrap: wrap;
}

/* ===== SIDEBAR ===== */
.dpfcrs-sidebar {
	width: 100%;
	background-color: #ffffff;
	border-right: 1px solid #e2e8f0;
	display: flex;
	flex-direction: column;
	transition: background-color 0.3s, border-color 0.3s;
	position: relative;
	min-height: 100%;
	height: 100%;
	z-index: 9991;
	overflow-x: hidden;
	overflow-y: auto;
	flex-shrink: 0;
	align-self: stretch;
}


.dpfcrs-sidebar-header {
	height: 4.5rem;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	padding: 0 .5rem;
	border-bottom: 1px solid #e2e8f0;
	flex-shrink: 0;
}


.dpfcrs-sidebar-logo {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	color: #111318;
	width: auto;
	margin-right: auto;
}


.dpfcrs-sidebar-logo img {
	height: 2.25rem;
	width: auto;
	object-fit: contain;
	flex-shrink: 0;
}

.dpfcrs-sidebar-logo-text {
	display: flex;
	flex-direction: column;
	gap: 0.0625rem;
	flex: 1;
	min-width: 0;
}

.dpfcrs-sidebar-logo-title {
	font-size: 1.1rem;
	font-weight: 700;
	line-height: 1.25rem;
	letter-spacing: -0.02em;
	margin: 0;
	color: #111318;
	white-space: normal;
	overflow: visible;
	word-wrap: break-word;
}


.dpfcrs-sidebar-logo-subtitle {
	font-size: 0.625rem;
	font-weight: 400;
	font-style: italic;
	line-height: 1rem;
	margin: 0;
	color: #6b7280;
}


.dpfcrs-sidebar-logo .dpfcrs-icon {
	color: var(--color-primary);
	width: 1.875rem;
	height: 1.875rem;
}

.dpfcrs-sidebar-logo span {
	font-size: 1.125rem;
	font-weight: 700;
	letter-spacing: -0.02em;
}

.dpfcrs-sidebar-nav {
	flex: 1;
	overflow-y: auto;
	overflow-x: hidden;
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	padding: 1rem 0.75rem;
	min-height: 0;
}

.dpfcrs-sidebar-nav-title {
	padding: 0.5rem 0.75rem;
	font-size: 0.75rem;
	font-weight: 600;
	color: #374151;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}


.dpfcrs-sidebar-nav-link {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.625rem 0.75rem;
	border-radius: 0.5rem;
	transition: all 0.2s;
	color: #374151;
	text-decoration: none;
	font-size: 0.8125rem;
}


.dpfcrs-sidebar-nav-link:hover {
	background-color: #f8fafc;
}

.dpfcrs-sidebar-nav-link:focus {
	outline: none !important;
	box-shadow: none !important;
}

.dpfcrs-sidebar-nav-link:active {
	outline: none !important;
	box-shadow: none !important;
}

.dpfcrs-sidebar-nav-link:focus-visible {
	outline: 2px solid var(--color-primary);
	outline-offset: 2px;
}

.dpfcrs-sidebar-nav-link.dpfcrs-nav-active {
	background-color: var(--color-primary-light);
	color: var(--color-primary);
	font-weight: 500;
}

.dpfcrs-sidebar-nav-link .dpfcrs-icon {
	width: 1.25rem;
	height: 1.25rem;
}

.dpfcrs-sidebar-nav-link.dpfcrs-nav-active .dpfcrs-icon {
	opacity: 1;
}

.dpfcrs-sidebar-nav-link:not(.dpfcrs-nav-active):hover .dpfcrs-icon {
	color: var(--color-primary);
}

.dpfcrs-sidebar-footer {
	padding: 1rem;
	flex-shrink: 0;
}


.dpfcrs-sidebar-user {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

.dpfcrs-sidebar-actions {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	margin-top: 1rem;
	padding-top: 1rem;
	border-top: 1px solid #e2e8f0;
}


.dpfcrs-nav-check {
	margin-left: auto;
	color: #16a34a;
	font-size: 0.9rem;
	font-weight: 700;
	flex-shrink: 0;
}
.dpfcrs-sidebar-action-btn {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.625rem 0.75rem;
	border: none;
	background: none;
	color: #374151;
	font-size: 0.875rem;
	font-weight: 400;
	cursor: pointer;
	transition: all 0.2s;
	width: 100%;
	text-align: left;
	border-radius: 0.375rem;
}

.dpfcrs-sidebar-action-btn:hover {
	background-color: #f8fafc;
	color: var(--color-primary);
}

.dpfcrs-sidebar-action-btn:focus {
	outline: none !important;
	box-shadow: none !important;
}

.dpfcrs-sidebar-action-btn:active {
	outline: none !important;
	box-shadow: none !important;
}

.dpfcrs-sidebar-action-btn:focus-visible {
	outline: 2px solid var(--color-primary);
	outline-offset: 2px;
}

.dpfcrs-sidebar-action-btn .dpfcrs-icon {
	width: 1.125rem;
	height: 1.125rem;
	flex-shrink: 0;
}


/* ===== MAIN CONTENT ===== */
.dpfcrs-main-content {
	flex: 1;
	display: flex;
	flex-direction: column;
	min-height: 100%;
	height: 100%;
	align-self: stretch;
	margin-left: 0;
	width: 100%;
	transition: margin-left 0.2s;
}

/* ===== HEADER ===== */
.dpfcrs-header {
	height: 4.5rem;
	background-color: #ffffff;
	border-bottom: 1px solid #e2e8f0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 1.75rem;
	flex-shrink: 0;
	position: sticky;
	z-index: 9999;
}


.dpfcrs-header-left {
	display: flex;
	align-items: center;
	gap: 1rem;
}

.dpfcrs-header-menu-btn {
	color: #64748b;
	background: none;
	border: none;
	cursor: pointer;
	display: none;
}

.dpfcrs-header-menu-btn:hover {
	color: #475569;
}

.dpfcrs-header-title {
	color: #111318;
	font-size: 1.125rem;
	font-weight: 700;
	line-height: 1.75rem;
	letter-spacing: -0.02em;
	display: none;
}


.dpfcrs-header-right {
	display: flex;
	align-items: center;
	gap: 1.5rem;
}

.dpfcrs-header-help-btn {
	color: #64748b;
	background: none;
	border: none;
	cursor: pointer;
	transition: color 0.2s;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0.5rem;
	border-radius: 0.375rem;
	text-decoration: none;
}

.dpfcrs-header-help-btn:hover {
	color: var(--color-primary);
	background-color: rgba(43, 108, 238, 0.1);
}


.dpfcrs-header-divider {
	height: 2rem;
	width: 1px;
	background-color: #e2e8f0;
}


.dpfcrs-header-doc-link {
	font-size: 0.875rem;
	font-weight: 500;
	color: var(--color-primary);
	text-decoration: none;
	transition: color 0.2s;
}

.dpfcrs-header-doc-link:hover {
	color: var(--color-primary-hover);
}

/* ===== MAIN AREA ===== */
.dpfcrs-main-area {
	flex: 1;
	overflow-y: auto;
	overflow-x: hidden;
	padding: 1rem 1rem;
	scroll-behavior: smooth;
	height: calc(100vh - 32px - 4rem - 36px);
}

.dpfcrs-main-container {
	max-width: 1200px;
	margin: 0 auto;
	display: flex;
  width: 100%;
	flex-direction: column;
	gap: 2rem;
}

/* ===== PAGE HEADER ===== */
.dpfcrs-page-header {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: flex-end;
	gap: 1rem;
}

.dpfcrs-page-header-content {
	display: flex;
	min-width: 18rem;
	flex-direction: column;
	gap: 0.5rem;
}

.dpfcrs-page-title {
	font-size: 1.875rem;
	font-weight: 900;
	line-height: 1.2;
	letter-spacing: -0.033em;
}

.dpfcrs-page-description {
	color: var(--color-text-sub-light);
  font-size: 1rem;
	font-weight: 400;
	line-height: 1.5;
	max-width: 42rem;
}


.dpfcrs-page-header-actions {
	display: flex;
	gap: 0.75rem;
}

/* ===== BUTTONS ===== */
.dpfcrs-btn {
	display: flex;
	cursor: pointer;
	align-items: center;
	justify-content: center;
  overflow: hidden;
	border-radius: 0.5rem;
	height: 2.5rem;
	padding: 0 1rem;
	font-size: 0.875rem;
	font-weight: 700;
	transition: all 0.2s;
	border: none;
	text-decoration: none;
}

.dpfcrs-btn-sm {
	height: 2rem;
	padding: 0 0.65rem;
	font-size: 0.8rem;
	font-weight: 500;
}

.dpfcrs-btn-primary {
	background-color: var(--color-primary);
	color: #ffffff;
	box-shadow: 0 4px 6px -1px rgba(43, 108, 238, 0.2);
}

.dpfcrs-btn-primary:hover {
	background-color: #1e5dd8;
}

.dpfcrs-btn-primary:active {
	transform: scale(0.95);
}

.dpfcrs-btn-secondary {
	background-color: var(--color-surface-light);
	border: 1px solid var(--color-border-light);
	color: var(--color-text-main-light);
}


.dpfcrs-btn-secondary:hover {
	background-color: #f8fafc;
}


.dpfcrs-btn-outline {
	background-color: rgba(43, 108, 238, 0.1);
	border: 1px solid rgba(43, 108, 238, 0.2);
	color: var(--color-primary);
}

.dpfcrs-btn-outline:hover {
	background-color: rgba(43, 108, 238, 0.2);
}

.dpfcrs-btn-icon {
	margin-right: 0.5rem;
	width: 1.25rem;
	height: 1.25rem;
	flex-shrink: 0;
}

.dpfcrs-btn:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

.dpfcrs-btn-lg {
	height: 3rem;
	padding: 0 1.5rem;
}

/* Remove Connection Icon Button */
.dpfcrs-remove-connection-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.75rem;
	height: 1.75rem;
	padding: 0;
	border: none;
	background: transparent;
	color: var(--color-text-sub-light);
	cursor: pointer;
	border-radius: 0.25rem;
	transition: all 0.2s ease;
	opacity: 0.6;
}

.dpfcrs-remove-connection-btn:hover {
	opacity: 1;
	background-color: rgba(239, 68, 68, 0.1);
	color: #ef4444;
}

.dpfcrs-remove-connection-btn:active {
	transform: scale(0.95);
}



/* ===== CARDS ===== */
.dpfcrs-card {
	background-color: var(--color-surface-light);
	border-radius: 0.75rem;
	box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
	border: 1px solid var(--color-border-light);
	overflow: hidden;
}


.dpfcrs-card-header {
	padding: 1.3rem 1.7rem;
	border-bottom: 1px solid var(--color-border-light);
	display: flex;
	justify-content: space-between;
	align-items: center;
}


.dpfcrs-card-title {
	font-size: 1.125rem;
	font-weight: 700;
	margin: 0 !important;
	margin-bottom: 0 !important;
	line-height: 1.2 !important;
}

.dpfcrs-card-header .dpfcrs-card-title {
	margin: 0 !important;
	margin-bottom: 0 !important;
	line-height: 1.2 !important;
}

.dpfcrs-card-description {
	color: var(--color-text-sub-light);
	font-size: 0.80rem;
	line-height: 1.5;
	margin: 0 !important;
	margin-top: 0.1875rem !important;
}

.dpfcrs-card-header .dpfcrs-card-description {
	margin: 0 !important;
	margin-top: 0.1875rem !important;
}

.dpfcrs-card-header .dpfcrs-flex-col {
	gap: 0.125rem!important;
}


.dpfcrs-card-body {
	padding: 1.5rem;
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
}

.dpfcrs-pricing-card .dpfcrs-card-body {
	padding: 1.25rem 1.5rem;
	flex: 1;
	display: flex;
	flex-direction: column;
}

/* ===== FORMS ===== */
.dpfcrs-form-fields-container {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.dpfcrs-form-group {
  display: flex;
	flex-direction: column;
}

.dpfcrs-form-label-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
}

.dpfcrs-form-label {
	font-size: 0.875rem;
	font-weight: 500;
	color: var(--color-text-main-light);
}


.dpfcrs-form-input-wrapper {
	position: relative;
}

.dpfcrs-form-input {
	width: 100%;
	border-radius: 0.5rem !important;
	border: 1px solid #cbd5e1!important;
	background-color: #ffffff!important;
	color: var(--color-text-main-light);
  height: 2.75rem;
	padding: 0 0.75rem;
	font-size: 0.875rem;
	transition: all 0.2s;
	box-sizing: border-box;
}

.dpfcrs-form-input::placeholder {
	color: var(--color-text-sub-light);
	opacity: 0.6;
}



.dpfcrs-form-input:focus {
	outline: none;
	ring: 2px;
	ring-color: var(--color-primary);
	border-color: var(--color-primary);
	box-shadow: 0 0 0 2px rgba(43, 108, 238, 0.2);
}

.dpfcrs-form-input-icon-left {
	padding-left: 2.5rem !important;
}

.dpfcrs-form-input-icon-right {
	padding-right: 2.5rem !important;
}

.dpfcrs-form-icon-left {
	position: absolute;
	left: 0.75rem;
	top: 50%;
	transform: translateY(-50%);
	color: var(--color-text-sub-light);
	display: flex;
	align-items: center;
	justify-content: center;
	pointer-events: none;
	z-index: 1;
	width: 1.25rem;
	height: 1.25rem;
	line-height: 0;
}


.dpfcrs-form-icon-left .dpfcrs-icon {
	width: 1.25rem;
	height: 1.25rem;
	flex-shrink: 0;
}

.dpfcrs-form-icon-left .dpfcrs-icon svg {
	width: 1.25rem;
	height: 1.25rem;
	display: block;
}

.dpfcrs-form-icon-right {
	position: absolute;
	right: 0.75rem;
	top: 50%;
	transform: translateY(-50%);
	color: var(--color-text-sub-light);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: color 0.2s;
	z-index: 1;
	background: none;
	border: none;
	padding: 0;
	width: 1.25rem;
	height: 1.25rem;
	line-height: 0;
}


.dpfcrs-form-icon-right:hover {
	color: var(--color-primary);
}

.dpfcrs-form-icon-right .dpfcrs-icon {
	width: 1.25rem;
	height: 1.25rem;
	flex-shrink: 0;
}

.dpfcrs-form-icon-right .dpfcrs-icon svg {
	width: 1.25rem;
	height: 1.25rem;
	display: block;
}

.dpfcrs-form-help-text {
	font-size: 0.75rem;
	color: var(--color-text-sub-light);
	margin-top: 0.125rem;
	margin-bottom: 0;
}


.dpfcrs-form-select {
	width: 100%;
	appearance: none;
	border-radius: 0.5rem!important;
	border: 1px solid #cbd5e1!important; 
	background-color: #ffffff!important;
	color: var(--color-text-main-light)!important;
	height: 2.75rem;
	padding: 0 2.5rem 0 0.75rem;
	font-size: 0.875rem;
	cursor: pointer;
	transition: all 0.2s;
}


.dpfcrs-form-select:focus {
	outline: none;
	border-color: var(--color-primary);
	box-shadow: 0 0 0 2px rgba(43, 108, 238, 0.2);
}

.dpfcrs-form-select-icon {
	position: absolute;
	right: 0.75rem;
	top: 50%;
	transform: translateY(-50%);
	pointer-events: none;
	color: var(--color-text-sub-light);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 1;
}

.dpfcrs-form-select-icon .dpfcrs-icon {
	width: 1.25rem;
	height: 1.25rem;
}

.dpfcrs-form-select-icon-left {
	padding-left: 2.5rem !important;
}

/* ===== GRID SYSTEM ===== */
.dpfcrs-grid {
	display: grid;
	gap: 1.5rem;
}

.dpfcrs-grid-cols-1 {
	grid-template-columns: repeat(1, minmax(0, 1fr));
}

.dpfcrs-grid-cols-2 {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.dpfcrs-grid-cols-3 {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.dpfcrs-grid-cols-12 {
	grid-template-columns: repeat(12, minmax(0, 1fr));
}

.dpfcrs-col-span-2 {
	grid-column: span 2 / span 2;
}

.dpfcrs-col-span-4 {
	grid-column: span 4 / span 4;
}

.dpfcrs-col-span-8 {
	grid-column: span 8 / span 8;
}

/* ===== STATUS BADGE ===== */
.dpfcrs-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	font-size: 0.75rem;
	font-weight: 500;
	padding: 0.5rem 0.75rem;
	border-radius: 9999px;
}

.dpfcrs-badge-success {
	background-color: #d1fae5;
	color: #047857;
}


.dpfcrs-badge-pulse {
	width: 0.375rem;
	height: 0.375rem;
	border-radius: 9999px;
	background-color: #10b981;
	animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes pulse {
	0%, 100% {
		opacity: 1;
	}
  50% {
    opacity: .5;
  }
}

/* ===== TABLE ===== */
.dpfcrs-table-container {
	overflow-x: auto;
}

.dpfcrs-table {
	width: 100%;
	text-align: left;
	font-size: 0.875rem;
}

.dpfcrs-table thead {
	background-color: var(--color-bg-light);
	border-bottom: 1px solid var(--color-border-light);
	color: var(--color-text-sub-light);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	font-size: 0.75rem;
	font-weight: 600;
}


.dpfcrs-table th {
	padding: 1rem 1.5rem;
}

.dpfcrs-table tbody {
	divide-y: 1px solid var(--color-border-light);
}


.dpfcrs-table tbody tr {
	transition: background-color 0.2s;
	border-bottom: 1px solid var(--color-border-light);
}


.dpfcrs-table tbody tr:hover {
	background-color: var(--color-bg-light);
}


.dpfcrs-table td {
	padding: 1rem 1.5rem;
}

.dpfcrs-table-cell-flex {
	display: flex;
  align-items: center;
	gap: 0.75rem;
}

.dpfcrs-table-avatar {
	width: 2rem;
	height: 2rem;
	border-radius: 0.25rem;
	background-color: #dbeafe;
	display: flex;
	align-items: center;
  justify-content: center;
	color: var(--color-primary);
	font-weight: 700;
}


.dpfcrs-table-text-main {
	font-weight: 500;
	color: var(--color-text-main-light);
}


.dpfcrs-table-text-sub {
	color: var(--color-text-sub-light);
	font-family: monospace;
	font-size: 0.75rem;
}


.dpfcrs-table-status {
	display: flex;
	align-items: center;
	gap: 0.375rem;
}

.dpfcrs-table-status-dot {
	width: 0.375rem;
	height: 0.375rem;
	border-radius: 9999px;
	background-color: #10b981;
}

.dpfcrs-table-text-center {
	text-align: center;
}

.dpfcrs-table-text-right {
	text-align: right;
}

/* ===== MINIMAL MODERN TABLE DESIGN ===== */
.dpfcrs-table-modern {
	border-radius: 0.5rem;
	overflow: hidden;
	background: var(--color-surface-light);
	border: 1px solid var(--color-border-light);
}

.dpfcrs-table-spaces {
	border-collapse: separate;
	border-spacing: 0;
	width: 100%;
}

.dpfcrs-table-spaces thead {
	background: var(--color-bg-light);
	border-bottom: 1px solid var(--color-border-light);
}

.dpfcrs-table-spaces thead th {
	padding: 1rem 1.5rem;
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--color-text-sub-light);
}

.dpfcrs-table-spaces tbody tr {
	border-bottom: 1px solid var(--color-border-light);
}

.dpfcrs-table-spaces tbody tr:last-child {
	border-bottom: none;
}

.dpfcrs-table-spaces tbody td {
	padding: 1rem 1.5rem;
	vertical-align: middle;
}

.dpfcrs-table-col-space {
	width: 50%;
}

.dpfcrs-table-col-key {
	width: 30%;
}

.dpfcrs-table-col-sync {
	width: 20%;
	text-align: center;
}

.dpfcrs-table-cell-content {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

.dpfcrs-table-avatar-modern {
	width: 2.25rem;
	height: 2.25rem;
	border-radius: 0.375rem;
	background: var(--color-primary);
	display: flex;
	align-items: center;
	justify-content: center;
	color: #ffffff;
	font-weight: 600;
	font-size: 0.875rem;
	flex-shrink: 0;
}

.dpfcrs-table-cell-text {
	flex: 1;
	min-width: 0;
}

.dpfcrs-table-spaces .dpfcrs-table-text-main {
	font-size: 0.9375rem;
	font-weight: 500;
	color: var(--color-text-main-light);
	line-height: 1.5;
	display: block;
}

.dpfcrs-table-key-badge {
	display: inline-block;
	font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', monospace;
	font-size: 0.8125rem;
	color: var(--color-text-sub-light);
	background: transparent;
	padding: 0;
	font-weight: 500;
	letter-spacing: 0.025em;
}

.dpfcrs-table-cell-sync {
	text-align: center;
}

.dpfcrs-table-cell-sync .dpfcrs-toggle-wrapper {
	display: inline-flex;
	justify-content: center;
}

@media (max-width: 768px) {
	.dpfcrs-table-spaces thead th,
	.dpfcrs-table-spaces tbody td {
		padding: 0.875rem 1rem;
	}
	
	.dpfcrs-table-avatar-modern {
		width: 2rem;
		height: 2rem;
		font-size: 0.8125rem;
	}
	
	.dpfcrs-table-cell-content {
		gap: 0.625rem;
	}
}

/* ===== TOGGLE SWITCH ===== */
.dpfcrs-toggle-wrapper {
	position: relative;
	display: inline-flex;
	align-items: center;
	cursor: pointer;
}

.dpfcrs-toggle-input {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
  overflow: hidden;
	clip: rect(0, 0, 0, 0);
  white-space: nowrap;
	border-width: 0;
}

.dpfcrs-toggle {
	width: 2.75rem;
	height: 1.5rem;
	background-color: #d1d5db;
  border-radius: 9999px;
	position: relative;
	transition: background-color 0.2s;
}


.dpfcrs-toggle:after {
	content: '';
	position: absolute;
	top: 0.125rem;
	left: 0.125rem;
	background-color: #ffffff;
	border: 1px solid #d1d5db;
	border-radius: 9999px;
	height: 1.25rem;
	width: 1.25rem;
	transition: transform 0.2s;
}


.dpfcrs-toggle-input:checked + .dpfcrs-toggle {
	background-color: var(--color-primary);
}

.dpfcrs-toggle-input:checked + .dpfcrs-toggle:after {
	transform: translateX(1.25rem);
	border-color: #ffffff;
}

.dpfcrs-toggle-input:focus + .dpfcrs-toggle {
	outline: none;
	box-shadow: 0 0 0 2px rgba(43, 108, 238, 0.5);
}


/* ===== FILTER & SEARCH ===== */
.dpfcrs-filter-group {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0 0.25rem;
}

.dpfcrs-filter-title {
	font-size: 1.25rem;
	font-weight: 700;
	color: var(--color-text-main-light);
}


.dpfcrs-filter-actions {
	display: flex;
	gap: 0.5rem;
}

.dpfcrs-filter-input {
	height: 2.25rem;
	width: 16rem;
	border-radius: 0.5rem!important;
	border: 1px solid #cbd5e1!important;;
	background-color: var(--color-surface-light);
	padding-left: 2.25rem;
	padding-right: 0.75rem;
	font-size: 0.875rem;
}


.dpfcrs-filter-input:focus {
	outline: none;
	box-shadow: 0 0 0 1px var(--color-primary);
}

.dpfcrs-filter-btn {
	height: 2.25rem;
	padding: 0 0.75rem;
	border-radius: 0.5rem;
	border: 1px solid var(--color-border-light);
	background-color: var(--color-surface-light);
	display: flex;
	align-items: center;
	color: var(--color-text-sub-light);
	transition: all 0.2s;
	font-size: 0.75rem;
	font-weight: 500;
	cursor: pointer;
}


.dpfcrs-filter-btn:hover {
	background-color: var(--color-bg-light);
}


/* ===== TOAST NOTIFICATIONS ===== */
#dpfcrs-toast-container {
	position: fixed;
	top: calc(32px + 4.5rem + 2rem);
	right: 2rem;
	z-index: 10000;
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	pointer-events: none;
	max-width: 28rem;
}

.dpfcrs-toast {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.75rem 1.25rem;
	border-radius: 0.5rem;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
	border: none;
	background: #1e293b;
	color: #f1f5f9;
	font-size: 0.875rem;
	font-weight: 500;
	max-width: 28rem;
	pointer-events: auto;
	animation: slideInRight 0.3s ease-out;
}

@keyframes slideInRight {
	from {
		transform: translateX(100%);
		opacity: 0;
	}
	to {
		transform: translateX(0);
		opacity: 1;
	}
}

.dpfcrs-toast-success {
	background: #1e293b;
	color: #f1f5f9;
}

.dpfcrs-toast-error {
	background: #1e293b;
	color: #f1f5f9;
}

.dpfcrs-toast-info {
	background: #1e293b;
	color: #f1f5f9;
}

.dpfcrs-toast-icon {
	width: 1.25rem;
	height: 1.25rem;
	flex-shrink: 0;
}

.dpfcrs-toast-icon.dpfcrs-toast-icon-success {
	color: #4ade80;
}

.dpfcrs-toast-icon.dpfcrs-toast-icon-error {
	color: #f87171;
}

.dpfcrs-toast-icon.dpfcrs-toast-icon-info {
	color: #60a5fa;
}


.dpfcrs-toast-message {
	flex: 1;
	font-size: 0.875rem;
	font-weight: 500;
}

.dpfcrs-toast-close {
	background: none;
	border: none;
	cursor: pointer;
	opacity: 0.5;
	transition: opacity 0.2s;
	color: #f1f5f9;
	padding: 0;
	display: flex;
	align-items: center;
	margin-left: 0.25rem;
}

.dpfcrs-toast-close:hover {
	opacity: 1;
}

/* ===== INPUT ERROR STATE ===== */
.dpfcrs-input-error {
	border-color: #ef4444 !important;
	box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.2) !important;
}

/* ===== SAVE TOAST ===== */
.dpfcrs-save-toast {
	position: fixed;
	top: calc(32px + 4.5rem + 2rem);
	right: 2rem;
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.75rem 1.25rem;
	background: #1e293b;
	color: #f1f5f9;
	font-size: 0.875rem;
	font-weight: 500;
	border-radius: 0.5rem;
	box-shadow: 0 8px 24px rgba(0,0,0,0.2);
	z-index: 9999;
	animation: dpfcrs-toast-in 0.25s ease;
}

.dpfcrs-save-toast svg {
	color: #4ade80;
	flex-shrink: 0;
}

.dpfcrs-save-toast.dpfcrs-toast-hide {
	animation: dpfcrs-toast-out 0.3s ease forwards;
}

@keyframes dpfcrs-toast-in {
	from { opacity: 0; transform: translateX(0.75rem); }
	to   { opacity: 1; transform: translateX(0); }
}

@keyframes dpfcrs-toast-out {
	from { opacity: 1; transform: translateX(0); }
	to   { opacity: 0; transform: translateX(0.75rem); }
}

/* ===== ALERT/INFO BOX ===== */
.dpfcrs-alert {
	padding: 1rem 1.25rem;
	border-radius: 0.5rem;
	border: 1px solid;
	border-left-width: 4px;
	display: flex;
	align-items: flex-start;
	gap: 0.875rem;
	background-color: #ffffff;
}

.dpfcrs-alert-success {
	background-color: #f0fdf4;
	border-color: #bbf7d0;
	border-left-color: #16a34a;
}

.dpfcrs-alert-warning {
	background-color: #fffbeb;
	border-color: #fde68a;
	border-left-color: #f59e0b;
}

.dpfcrs-alert-info {
	background-color: #eff6ff;
	border-color: #bfdbfe;
	border-left-color: #3b82f6;
}

.dpfcrs-alert-icon-wrapper {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	margin-top: 0.1rem;
}

.dpfcrs-alert-icon {
	color: #16a34a;
	width: 1.25rem;
	height: 1.25rem;
	flex-shrink: 0;
}

.dpfcrs-alert-warning .dpfcrs-alert-icon {
	color: #f59e0b;
}

.dpfcrs-alert-info .dpfcrs-alert-icon {
	color: #3b82f6;
}

.dpfcrs-alert-content {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	min-width: 0;
}

.dpfcrs-alert-title {
	color: #14532d;
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1.4;
	margin: 0 !important;
	padding: 0 !important;
}

.dpfcrs-alert-warning .dpfcrs-alert-title {
	color: #92400e;
}

.dpfcrs-alert-info .dpfcrs-alert-title {
	color: #1e40af;
}

.dpfcrs-alert-text {
	color: #166534;
	font-size: 0.875rem;
	line-height: 1.5;
	margin: 0 !important;
	padding: 0 !important;
}

.dpfcrs-alert-warning .dpfcrs-alert-text {
	color: #78350f;
}

.dpfcrs-alert-info .dpfcrs-alert-text {
	color: #1d4ed8;
}


/* ===== RADIO CARD ===== */
.dpfcrs-radio-card-wrapper {
	position: relative;
	display: flex;
	cursor: pointer;
}

.dpfcrs-radio-card-input {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border-width: 0;
}

.dpfcrs-radio-card {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 0.5rem;
	border-radius: 0.5rem;
	border: 2px solid var(--color-border-light);
	background-color: var(--color-surface-light);
	padding: 0.875rem;
	transition: all 0.2s;
}


.dpfcrs-radio-card-wrapper:hover .dpfcrs-radio-card {
	border-color: #cbd5e1;
}


.dpfcrs-radio-card-input:checked + .dpfcrs-radio-card {
	border-color: var(--color-primary);
	box-shadow: 0 0 0 1px var(--color-primary);
	background-color: rgba(43, 108, 238, 0.05);
}


.dpfcrs-radio-card-header {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	position: relative;
}

.dpfcrs-radio-card-icon {
	color: var(--color-text-main-light);
	width: 1.5rem;
	height: 1.5rem;
	flex-shrink: 0;
}


.dpfcrs-radio-card-indicator {
	height: 1rem;
	width: 1rem;
	border-radius: 9999px;
	border: 1px solid var(--color-border-light);
}

.dpfcrs-radio-card-input:checked + .dpfcrs-radio-card .dpfcrs-radio-card-indicator {
	border-color: var(--color-primary);
	background-color: var(--color-primary);
}

.dpfcrs-radio-card-content {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
}

.dpfcrs-radio-card-title {
	color: var(--color-text-main-light);
  font-size: 1rem;
  font-weight: 700;
}


.dpfcrs-radio-card-description {
	color: var(--color-text-sub-light);
	font-size: 0.875rem;
  line-height: 1.5;
}


/* ===== CHECKBOX ===== */
.dpfcrs-checkbox {
	border-radius: 0.25rem;
	border: 1px solid #d1d5db;
	color: var(--color-primary);
	height: 1rem;
	width: 1rem;
	cursor: pointer;
}

.dpfcrs-checkbox:focus {
	box-shadow: 0 0 0 2px rgba(43, 108, 238, 0.2);
}

/* ===== PAGE TREE ===== */
#dpfcrs-pages-tree {
	font-family: "Inter", sans-serif;
	max-height: 37.5rem;
	overflow-y: auto;
	border: 1px solid var(--color-border-light);
	border-radius: 0.5rem;
	padding: 1rem;
	background-color: #fcfcfd;
}


.page-item {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.5rem;
	border-radius: 0.25rem;
	transition: background-color 0.15s;
}

.page-item:hover {
	background-color: rgba(43, 108, 238, 0.05);
}

/* Page ID Container */
.dpfcrs-page-id-container {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	padding: 0.25rem 0.5rem;
	background-color: #f1f5f9;
	border-radius: 0.375rem;
	border: 1px solid #e2e8f0;
}

.dpfcrs-page-id-text {
	color: #475569;
	font-size: 0.75rem;
	line-height: 1.25rem;
}

.dpfcrs-page-id-copy {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.125rem;
	background: transparent;
	border: none;
	border-radius: 0.25rem;
	cursor: pointer;
	color: #64748b;
	transition: all 0.15s ease;
	line-height: 1;
}

.dpfcrs-page-id-copy:hover {
	color: #2b6cef;
	background-color: rgba(43, 108, 238, 0.1);
}

.dpfcrs-page-id-copy:active {
	transform: scale(0.95);
}

/* Last Sync Time */
.dpfcrs-last-sync-time {
	color: #64748b;
	font-size: 0.75rem;
	line-height: 1.25rem;
	padding: 0.25rem 0.5rem;
	background-color: #f8fafc;
	border-radius: 0.375rem;
	border: 1px solid #e2e8f0;
	white-space: nowrap;
}

.dpfcrs-page-id-copy .dpfcrs-icon {
	width: 14px;
	height: 14px;
}


.dpfcrs-page-checkbox:checked + .dpfcrs-icon {
	color: var(--color-primary);
}

.dpfcrs-page-checkbox:checked ~ span {
	color: var(--color-primary);
	font-weight: 500;
}

/* ===== LOADING SPINNER ===== */
.dpfcrs-loading {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.75rem;
	padding: 3rem 0;
}

.dpfcrs-loading-icon {
	color: var(--color-primary);
	width: 2.25rem;
	height: 2.25rem;
	flex-shrink: 0;
	animation: spin 1s linear infinite;
}

@keyframes spin {
	from {
		transform: rotate(0deg);
	}
	to {
		transform: rotate(360deg);
	}
}

.dpfcrs-loading-text {
	color: var(--color-text-sub-light);
	font-size: 0.875rem;
}


/* ===== SVG ICONS ===== */
.dpfcrs-icon {
	display: inline-block;
	vertical-align: middle;
	flex-shrink: 0;
}

.dpfcrs-icon svg {
	width: 100%;
	height: 100%;
	display: block;
}

/* ===== SCROLLBAR ===== */
.dpfcrs-admin-wrapper ::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.dpfcrs-admin-wrapper ::-webkit-scrollbar-track {
  background: transparent;
}

.dpfcrs-admin-wrapper ::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 4px;
}


/* ===== UTILITY CLASSES ===== */
.dpfcrs-hidden {
  display: none;
}

.dpfcrs-flex {
	display: flex;
}

.dpfcrs-flex-col {
	flex-direction: column;
}

.dpfcrs-items-center {
	align-items: center;
}

.dpfcrs-justify-between {
	justify-content: space-between;
}

.dpfcrs-justify-end {
	justify-content: flex-end;
}

.dpfcrs-gap-1 {
	gap: 0.25rem;
}

.dpfcrs-gap-2 {
	gap: 0.5rem;
}

.dpfcrs-gap-3 {
	gap: 0.75rem;
}

.dpfcrs-gap-4 {
	gap: 1rem;
}

.dpfcrs-gap-5 {
	gap: 1.25rem;
}

.dpfcrs-gap-6 {
	gap: 1.5rem;
}

.dpfcrs-gap-8 {
	gap: 2rem;
}

.dpfcrs-gap-10 {
	gap: 2.5rem;
}

.dpfcrs-mb-1 {
	margin-bottom: 0.25rem;
}

.dpfcrs-mb-2 {
	margin-bottom: 0.5rem;
}

.dpfcrs-mb-4 {
	margin-bottom: 1rem;
}

.dpfcrs-mb-6 {
	margin-bottom: 1.5rem;
}

.dpfcrs-mt-2 {
	margin-top: 0.5rem;
}

.dpfcrs-mt-6 {
	margin-top: 1.5rem;
}

.dpfcrs-pt-2 {
	padding-top: 0.5rem;
}

.dpfcrs-pt-4 {
	padding-top: 1rem;
}

.dpfcrs-pt-6 {
	padding-top: 1.5rem;
}

.dpfcrs-pb-8 {
	padding-bottom: 2rem;
}

.dpfcrs-px-4 {
	padding-left: 1rem;
	padding-right: 1rem;
}

.dpfcrs-px-5 {
	padding-left: 1.25rem;
	padding-right: 1.25rem;
}

.dpfcrs-px-6 {
	padding-left: 1.5rem;
	padding-right: 1.5rem;
}

.dpfcrs-py-8 {
	padding-top: 2rem;
	padding-bottom: 2rem;
}

.dpfcrs-py-12 {
	padding-top: 3rem;
	padding-bottom: 3rem;
}

.dpfcrs-p-4 {
	padding: 1rem;
}

.dpfcrs-p-5 {
	padding: 1.25rem;
}

.dpfcrs-p-6 {
	padding: 1.5rem;
}

.dpfcrs-p-8 {
	padding: 2rem;
}

.dpfcrs-w-full {
	width: 100%;
}

.dpfcrs-max-w-2xl {
	max-width: 42rem;
}

.dpfcrs-max-w-xl {
	max-width: 36rem;
}

.dpfcrs-text-center {
	text-align: center;
}

.dpfcrs-text-xs {
	font-size: 0.75rem;
}

.dpfcrs-text-sm {
	font-size: 0.875rem;
}

.dpfcrs-text-base {
	font-size: 1rem;
}

.dpfcrs-text-lg {
	font-size: 1.125rem;
}

.dpfcrs-text-xl {
	font-size: 1.25rem;
}

.dpfcrs-text-2xl {
	font-size: 1.5rem;
}

.dpfcrs-text-3xl {
	font-size: 1.875rem;
}

.dpfcrs-font-medium {
	font-weight: 500;
}

.dpfcrs-font-semibold {
	font-weight: 600;
}

.dpfcrs-font-bold {
	font-weight: 700;
}

.dpfcrs-leading-tight {
	line-height: 1.25;
}

.dpfcrs-tracking-tight {
	letter-spacing: -0.025em;
}

.dpfcrs-border-t {
	border-top: 1px solid var(--color-border-light);
}


.dpfcrs-rounded-lg {
	border-radius: 0.5rem;
}

.dpfcrs-rounded-xl {
	border-radius: 0.75rem;
}

.dpfcrs-rounded-full {
	border-radius: 9999px;
}

.dpfcrs-animate-spin {
	animation: spin 1s linear infinite;
}

.animate-spin-slow {
	animation: spin 3s linear infinite;
}

.animate-slide-in {
	animation: slideInRight 0.3s ease-out;
}

/* ===== RESPONSIVE DESIGN ===== */
@media (min-width: 640px) {
	.sm\:dpfcrs-grid-cols-3 {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
	
	.sm\:dpfcrs-flex-row {
		flex-direction: row;
	}
	
	.sm\:dpfcrs-items-center {
		align-items: center;
	}
	
	.sm\:dpfcrs-block {
		display: block;
	}
}

@media (min-width: 768px) {
	.dpfcrs-sidebar {
		width: 13rem;
	}
	
	.dpfcrs-main-content {
		margin-left: 0;
	}
	
	.md\:dpfcrs-flex-row {
		flex-direction: row;
	}
	
	.md\:dpfcrs-grid-cols-2 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	
	.md\:dpfcrs-grid-cols-3 {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
	
	.md\:dpfcrs-p-8 {
		padding: 2rem;
	}
	
	.md\:dpfcrs-px-12 {
		padding-left: 3rem;
		padding-right: 3rem;
	}
	
	.md\:dpfcrs-py-12 {
		padding-top: 3rem;
		padding-bottom: 3rem;
	}
	
	.md\:dpfcrs-hidden {
		display: none;
	}
	
	.md\:dpfcrs-items-end {
		align-items: flex-end;
	}
	
	.md\:dpfcrs-w-auto {
		width: auto;
	}
	
	.dpfcrs-header-title {
		display: block;
	}
	
	.dpfcrs-header-menu-btn {
		display: none;
	}
	
}

@media (min-width: 1024px) {
	.lg\:dpfcrs-grid-cols-3 {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
	
	.lg\:dpfcrs-grid-cols-12 {
		grid-template-columns: repeat(12, minmax(0, 1fr));
	}
	
	.lg\:dpfcrs-col-span-1 {
		grid-column: span 1 / span 1;
	}
	
	.lg\:dpfcrs-col-span-2 {
		grid-column: span 2 / span 2;
	}
	
	.lg\:dpfcrs-col-span-4 {
		grid-column: span 4 / span 4;
	}
	
	.lg\:dpfcrs-col-span-8 {
		grid-column: span 8 / span 8;
	}
	
	.lg\:dpfcrs-order-1 {
		order: 1;
	}
	
	.lg\:dpfcrs-order-2 {
		order: 2;
	}
}

/* ===== ADDITIONAL HELPER CLASSES ===== */
.dpfcrs-min-w-72 {
	min-width: 18rem;
}

.dpfcrs-min-w-200 {
	min-width: 200px;
}

.dpfcrs-h-9 {
	height: 2.25rem;
}

.dpfcrs-h-10 {
	height: 2.5rem;
}

.dpfcrs-h-11 {
	height: 2.75rem;
}

.dpfcrs-h-12 {
	height: 3rem;
}

.dpfcrs-w-64 {
	width: 16rem;
}

.dpfcrs-opacity-0 {
	opacity: 0;
}

.dpfcrs-opacity-100 {
	opacity: 1;
}

.dpfcrs-transition-opacity {
	transition: opacity 0.2s;
}

.dpfcrs-absolute {
	position: absolute;
}

.dpfcrs-relative {
	position: relative;
}

.dpfcrs-top-3 {
	top: 0.75rem;
}

.dpfcrs-right-3 {
	right: 0.75rem;
}

.dpfcrs-flex-1 {
	flex: 1;
}

.dpfcrs-overflow-hidden {
	overflow: hidden;
}

.dpfcrs-shadow-sm {
	box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

.dpfcrs-shadow-md {
	box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.dpfcrs-cursor-pointer {
	cursor: pointer;
}

/* Badge variant for small tag */
.dpfcrs-tag {
	display: inline-flex;
	align-items: center;
	font-size: 0.75rem;
	font-weight: 700;
	padding: 0.125rem 0.5rem;
	border-radius: 0.25rem;
	background-color: rgba(43, 108, 238, 0.1);
	color: var(--color-primary);
}

.dpfcrs-tag-small {
	font-size: 0.75rem;
	background-color: #f1f5f9;
	color: #64748b;
	padding: 0.125rem 0.375rem;
	margin-left: auto;
}

/* Premium Badge */
.dpfcrs-premium-badge {
	display: inline-flex;
	align-items: center;
	font-size: 0.625rem;
	font-weight: 700;
	padding: 0.25rem 0.5rem;
	border-radius: 0.25rem;
	background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
	color: #ffffff;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1);
	position: absolute;
	top: -0.5rem;
	right: -0.5rem;
	z-index: 10;
}

.dpfcrs-radio-card-header .dpfcrs-premium-badge {
	position: absolute;
	top: -0.5rem;
	right: -0.5rem;
}

.dpfcrs-text-sm.dpfcrs-font-semibold .dpfcrs-premium-badge {
	position: static;
	margin-left: 0.5rem;
}

/* Premium Notice */
.dpfcrs-premium-notice {
	background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
	border: 1px solid #fde68a;
	border-radius: 0.75rem;
	padding: 1.125rem 1.375rem;
	box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.04);
}

.dpfcrs-premium-notice-content {
	display: flex;
	align-items: center;
	gap: 1rem;
	flex-wrap: wrap;
}

.dpfcrs-premium-notice-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	height: 2.25rem;
	background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
	border-radius: 0.5rem;
	flex-shrink: 0;
	color: #ffffff;
	opacity: 0.9;
}

.dpfcrs-premium-notice-icon .dpfcrs-icon {
	width: 1.375rem;
	height: 1.375rem;
}

.dpfcrs-premium-notice-text {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	min-width: 200px;
}

.dpfcrs-premium-notice-text strong {
	font-size: 0.875rem;
	font-weight: 600;
	color: #92400e;
	line-height: 1.4;
}

.dpfcrs-premium-notice-text span {
	font-size: 0.8125rem;
	color: #a16207;
	line-height: 1.5;
}

.dpfcrs-premium-notice-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.5625rem 1.125rem;
	background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
	color: #ffffff;
	font-size: 0.8125rem;
	font-weight: 500;
	border-radius: 0.5rem;
	text-decoration: none;
	transition: all 0.2s;
	box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.08);
	white-space: nowrap;
	opacity: 0.95;
}

.dpfcrs-premium-notice-button:hover {
	background: linear-gradient(135deg, #d97706 0%, #b45309 100%);
	box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.12);
	opacity: 1;
	color: #ffffff;
	text-decoration: none;
	transform: translateY(-0.5px);
}

@media (max-width: 768px) {
	.dpfcrs-premium-notice-content {
		flex-direction: column;
		align-items: stretch;
	}
	
	.dpfcrs-premium-notice-icon {
		align-self: flex-start;
	}
	
	.dpfcrs-premium-notice-button {
		width: 100%;
		justify-content: center;
	}
}


/* Order utilities for responsive layouts */
.dpfcrs-order-1 {
	order: 1;
}

.dpfcrs-order-2 {
	order: 2;
}

/* Space badge in page tree */
.dpfcrs-space-badge {
	font-size: 0.75rem;
	padding: 0.125rem 0.5rem;
	border-radius: 0.25rem;
	background-color: rgba(43, 108, 238, 0.1);
	color: var(--color-primary);
	font-weight: 500;
}


/* Text color utilities */
.dpfcrs-text-primary {
	color: var(--color-primary);
}

.dpfcrs-text-main {
	color: var(--color-text-main-light);
}


.dpfcrs-text-sub {
	color: var(--color-text-sub-light);
}


/* Link styling */
.dpfcrs-link {
	color: var(--color-primary);
	text-decoration: underline;
	font-weight: 500;
}

.dpfcrs-link:hover {
	text-decoration: none;
}

.dpfcrs-text-link {
	color: var(--color-primary);
	font-weight: 500;
	cursor: pointer;
	background: none;
	border: none;
	padding: 0;
	margin: 0;
	text-decoration: none;
	transition: all 0.2s;
	font-family: inherit;
	font-size: inherit;
	line-height: inherit;
}

button.dpfcrs-text-link {
	display: inline;
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	outline: none;
}

.dpfcrs-text-link:hover {
	text-decoration: underline;
	color: #1e5dd8;
}

.dpfcrs-text-link:active {
	opacity: 0.8;
}

.dpfcrs-text-link:focus {
	outline: none;
}

.dpfcrs-text-link:focus-visible {
	outline: 2px solid var(--color-primary);
	outline-offset: 2px;
	border-radius: 0.25rem;
}

/* Divider */
.dpfcrs-divider {
	border-top: 1px solid var(--color-border-light);
	margin: 1rem 0;
}


/* Selected count styling */
#dpfcrs-selected-count {
	font-size: 0.875rem;
	color: var(--color-text-sub-light);
}


/* Error message box */
#dpfcrs-pages-error {
	padding: 1rem;
	background-color: #fef2f2;
	border: 1px solid #fecaca;
	border-radius: 0.5rem;
}


#dpfcrs-pages-error p {
	color: #991b1b;
	font-size: 0.875rem;
}

/* ===== MODAL STYLES ===== */
.dpfcrs-modal {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 100000;
	align-items: center;
	justify-content: center;
	opacity: 0;
	transition: opacity 0.2s ease-in-out;
}

.dpfcrs-modal[aria-hidden="false"] {
	display: flex;
	opacity: 1;
}

.dpfcrs-modal-overlay {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(0, 0, 0, 0.5);
	backdrop-filter: blur(2px);
}

.dpfcrs-modal-content {
	position: relative;
	background-color: #ffffff;
	border-radius: 0.75rem;
	box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
	width: 90%;
	max-width: 500px;
	max-height: 90vh;
	display: flex;
	flex-direction: column;
	z-index: 1;
	transform: scale(0.95);
	transition: transform 0.2s ease-in-out;
}

.dpfcrs-modal[aria-hidden="false"] .dpfcrs-modal-content {
	transform: scale(1);
}

.dpfcrs-modal-header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	padding: 1.5rem;
	border-bottom: 1px solid #e2e8f0;
	position: relative;
	gap: 1rem;
}

.dpfcrs-modal-title {
	font-size: 1.25rem;
	font-weight: 700;
	color: #111318;
	margin: 0;
}

.dpfcrs-modal-description {
	margin: 0;
	margin-top: 0.5rem;
	line-height: 1.5;
}

.dpfcrs-modal-close {
	background: none;
	border: none;
	cursor: pointer;
	color: #64748b;
	padding: 0.25rem;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 0.375rem;
	transition: all 0.2s;
}

.dpfcrs-modal-close:hover {
	background-color: #f8fafc;
	color: #111318;
}

.dpfcrs-modal-close .dpfcrs-icon {
	width: 1.25rem;
	height: 1.25rem;
}

.dpfcrs-modal-form {
	padding: 1.5rem;
	overflow-y: auto;
	flex: 1;
}

.dpfcrs-form-group {
	margin-bottom: 1.5rem;
}

.dpfcrs-form-group:last-child {
	margin-bottom: 0;
}

.dpfcrs-form-label {
	display: block;
	font-size: 0.875rem;
	font-weight: 500;
	color: #111318;
	margin-bottom: 0.625rem;
}

.dpfcrs-required {
	color: #ef4444;
	margin-left: 0.25rem;
}

.dpfcrs-form-input,
.dpfcrs-form-textarea {
	width: 100%;
	padding: 0.625rem 0.75rem;
	border: 1px solid #cbd5e1;
	border-radius: 0.5rem;
	font-size: 0.875rem;
	color: #111318;
	background-color: #ffffff;
	transition: border-color 0.2s;
	font-family: inherit;
}

.dpfcrs-form-input:focus,
.dpfcrs-form-textarea:focus {
	outline: none;
	border-color: var(--color-primary);
	box-shadow: 0 0 0 3px var(--color-primary-light);
}

.dpfcrs-form-textarea {
	resize: vertical;
	min-height: 100px;
}

.dpfcrs-modal-actions {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 0.75rem;
	margin-top: 1.5rem;
	padding-top: 1.5rem;
	border-top: 1px solid #e2e8f0;
}

.dpfcrs-btn {
	/* padding: 0.625rem 1.25rem; */
	border-radius: 0.5rem;
	font-size: 0.875rem;
	font-weight: 500;
	cursor: pointer;
	transition: all 0.2s;
	border: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
}

.dpfcrs-btn-primary {
	background-color: var(--color-primary);
	color: #ffffff;
}

.dpfcrs-btn-primary:hover {
	background-color: var(--color-primary-hover);
}

.dpfcrs-btn-primary:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

.dpfcrs-btn-secondary {
	background-color: #ffffff;
	color: #64748b;
	border: 1px solid #e2e8f0;
}

.dpfcrs-btn-secondary:hover {
	background-color: #f8fafc;
	border-color: #cbd5e1;
}

/* ===== WORDPRESS ADMIN MENU LOGO ===== */
/* Style the custom logo in WordPress admin menu */
#adminmenu .toplevel_page_dpfcrs-connection .wp-menu-image {
	width: 36px;
	height: 34px;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
}

#adminmenu .toplevel_page_dpfcrs-connection .wp-menu-image img {
	width: 20px;
	height: 20px;
	padding: 0;
	margin: 0 auto;
	display: block;
	object-fit: contain;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

#adminmenu .toplevel_page_dpfcrs-connection .wp-menu-image::before {
	display: none !important;
}

/* Ensure proper alignment when menu is folded */
.folded #adminmenu .toplevel_page_dpfcrs-connection .wp-menu-image img {
	width: 20px;
	height: 20px;
}

/* ===== PRICING PAGE STYLES ===== */
.dpfcrs-pricing-card {
	position: relative;
	display: flex;
	flex-direction: column;
	height: auto;
	max-width: 100%;
}

.dpfcrs-pricing-card-featured {
	border: 2px solid var(--color-primary);
	box-shadow: 0 4px 6px -1px rgba(43, 108, 238, 0.1);
}

.dpfcrs-pricing-badge {
	position: absolute;
	top: -0.75rem;
	left: 50%;
	transform: translateX(-50%);
	background-color: var(--color-primary);
	color: #ffffff;
	font-size: 0.75rem;
	font-weight: 600;
	padding: 0.25rem 0.75rem;
	border-radius: 0.375rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	z-index: 1;
}

.dpfcrs-pricing-card-header {
	flex-direction: column;
	align-items: flex-start !important;
	justify-content: flex-start !important;
	padding-top: 1.25rem;
}

.dpfcrs-pricing-card-header-content {
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.75rem;
}

.dpfcrs-pricing-card-header .dpfcrs-card-title {
	margin: 0 !important;
	width: 100%;
}

.dpfcrs-pricing-amount {
	display: flex;
	align-items: baseline;
	gap: 0.25rem;
	margin-top: 0;
	width: 100%;
}

.dpfcrs-pricing-currency {
	font-size: 1.25rem;
	font-weight: 600;
	color: var(--color-text-main-light);
}

.dpfcrs-pricing-price {
	font-size: 2.25rem;
	font-weight: 700;
	color: var(--color-text-main-light);
	line-height: 1;
}

.dpfcrs-pricing-period {
	font-size: 1rem;
	font-weight: 400;
	color: var(--color-text-sub-light);
}

.dpfcrs-pricing-features {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 0.625rem;
	width: 100%;
	flex: 1;
}

.dpfcrs-pricing-feature {
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
	width: 100%;
}

.dpfcrs-pricing-feature-icon {
	flex-shrink: 0;
	color: var(--color-success);
	width: 1.25rem;
	height: 1.25rem;
	margin-top: 0.125rem;
}

.dpfcrs-pricing-feature span {
	font-size: 0.875rem;
	color: var(--color-text-main-light);
	line-height: 1.5;
	flex: 1;
}

/* ── Horizontal pricing card layout ──────────────────────────── */
.dpfcrs-pricing-card-horizontal {
	flex-direction: row;
	align-items: stretch;
}

.dpfcrs-pricing-card-left {
	width: 38%;
	min-width: 240px;
	padding: 0.875rem 1rem;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	border-right: 1px solid var(--color-border-light);
	flex-shrink: 0;
}

.dpfcrs-pricing-card-right {
	flex: 1;
	padding: 0.875rem 1rem;
	display: flex;
	align-items: center;
	min-width: 0;
}

.dpfcrs-pricing-features-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 0.375rem 1.25rem;
	flex-direction: unset;
	align-content: start;
	width: 100%;
}

@media (max-width: 768px) {
	.dpfcrs-pricing-card-horizontal {
		flex-direction: column;
	}
	.dpfcrs-pricing-card-left {
		width: 100%;
		min-width: unset;
		border-right: none;
		border-bottom: 1px solid var(--color-border-light);
	}
	.dpfcrs-pricing-features-grid {
		grid-template-columns: 1fr;
	}
}

.dpfcrs-faq-item {
	padding-bottom: 1.5rem;
	border-bottom: 1px solid var(--color-border-light);
}

.dpfcrs-faq-item:last-child {
	border-bottom: none;
	padding-bottom: 0;
}

.dpfcrs-faq-question {
	font-size: 1rem;
	font-weight: 600;
	color: var(--color-text-main-light);
	margin: 0 0 0.5rem 0;
}

.dpfcrs-faq-answer {
	font-size: 0.875rem;
	line-height: 1.6;
	margin: 0;
}

/* ===== TOOLTIP ===== */
.dpfcrs-tooltip-wrapper {
	position: relative;
	display: inline-block;
}

.dpfcrs-tooltip-wrapper button:disabled {
	pointer-events: none;
}

.dpfcrs-tooltip {
	visibility: hidden;
	opacity: 0;
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX(-50%);
	margin-top: 0.5rem;
	background-color: #1f2937;
	color: #ffffff;
	text-align: center;
	padding: 0.5rem 0.75rem;
	border-radius: 0.375rem;
	font-size: 0.75rem;
	white-space: nowrap;
	z-index: 1000;
	pointer-events: none;
	transition: opacity 0.2s, visibility 0.2s;
	box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.dpfcrs-tooltip::before {
	content: '';
	position: absolute;
	bottom: 100%;
	left: 50%;
	transform: translateX(-50%);
	border: 5px solid transparent;
	border-bottom-color: #1f2937;
}

.dpfcrs-tooltip-wrapper:hover .dpfcrs-tooltip {
	visibility: visible;
	opacity: 1;
}

/* Tab Navigation Styles */
.dpfcrs-tabs-wrapper {
	border-bottom: 1px solid #e5e7eb;
	margin-bottom: 1.5rem;
}

.dpfcrs-tabs-nav {
	display: flex;
	gap: 0;
}

.dpfcrs-tab-button {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.875rem 1.5rem;
	background: transparent;
	border: none;
	border-bottom: 2px solid transparent;
	color: #6b7280;
	font-size: 0.875rem;
	font-weight: 500;
	cursor: pointer;
	transition: color 0.2s ease;
	position: relative;
	margin-bottom: -1px;
}

.dpfcrs-tab-button:hover {
	color: #374151;
}

.dpfcrs-tab-button.dpfcrs-tab-active {
	color: #2563eb;
	border-bottom-color: #2563eb;
	font-weight: 600;
}

.dpfcrs-tab-icon {
	width: 18px;
	height: 18px;
	flex-shrink: 0;
	color: inherit;
}

/* Responsive tab styles */
@media (max-width: 768px) {
	.dpfcrs-tab-button {
		padding: 0.75rem 1rem;
		font-size: 0.8125rem;
		gap: 0.375rem;
	}
	
	.dpfcrs-tab-icon {
		width: 16px;
		height: 16px;
	}
}

.dpfcrs-tab-content {
	display: none;
}

.dpfcrs-tab-content.dpfcrs-tab-content-active {
	display: block;
}

/* Code Block Styles */
.dpfcrs-code-block {
	position: relative;
	background: #1f2937;
	border: 1px solid #374151;
	border-radius: 8px;
	padding: 14px 50px 14px 16px;
	margin: 8px 0;
	overflow: hidden;
}

.dpfcrs-code {
	font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'source-code-pro', monospace;
	font-size: 12px;
	color: #e5e7eb;
	word-break: break-all;
	display: block;
	line-height: 1.6;
}

.dpfcrs-code-copy {
	position: absolute;
	top: 10px;
	right: 10px;
	background: rgba(255, 255, 255, 0.15);
	border: 1px solid rgba(255, 255, 255, 0.3);
	border-radius: 6px;
	padding: 10px;
	cursor: pointer;
	transition: all 0.2s ease;
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	min-height: 40px;
	backdrop-filter: blur(4px);
	z-index: 10;
}

.dpfcrs-code-copy:hover {
	background: rgba(255, 255, 255, 0.2);
	border-color: rgba(255, 255, 255, 0.4);
	transform: scale(1.05);
}

.dpfcrs-code-copy:active {
	transform: scale(0.95);
}

.dpfcrs-code-copy-icon {
	width: 20px;
	height: 20px;
	color: #ffffff !important;
	transition: color 0.2s ease;
}

.dpfcrs-code-copy-icon svg {
	width: 100%;
	height: 100%;
	stroke: currentColor;
	stroke-width: 2;
}

.dpfcrs-code-copy:hover .dpfcrs-code-copy-icon {
	color: #ffffff !important;
	opacity: 0.9;
}

/* Step Number Styles */
.dpfcrs-step-number {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: #2563eb;
	color: #ffffff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 14px;
	font-weight: 600;
	flex-shrink: 0;
}

/* How to Use Steps Layout */
.dpfcrs-how-to-use-steps {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
}

.dpfcrs-step-item {
	display: flex;
	align-items: flex-start;
	gap: 1rem;
}

.dpfcrs-step-item .dpfcrs-step-number {
	align-self: flex-start;
	margin-top: 0;
	flex-shrink: 0;
}

.dpfcrs-step-content {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
}

.dpfcrs-step-title {
	font-size: 0.875rem;
	font-weight: 600;
	color: #1f2937;
	margin: 0 0 0.5rem 0;
	line-height: 1.5;
	display: flex;
	align-items: center;
	min-height: 32px;
}

.dpfcrs-step-description {
	font-size: 0.75rem;
	color: #6b7280;
	margin: 0;
	line-height: 1.6;
}

/* Background Color Utilities */
.dpfcrs-bg-gray-50 {
	background-color: #f9fafb;
}

.dpfcrs-bg-blue-50 {
	background-color: #eff6ff;
}

.dpfcrs-text-blue-600 {
	color: #2563eb;
}

/* Embed Sections - Equal Width Layout */
.dpfcrs-embed-sections {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1.5rem;
}

.dpfcrs-embed-sections .dpfcrs-embed-section {
	flex: 1;
	min-width: 0;
}

@media (max-width: 1024px) {
	.dpfcrs-embed-sections {
		grid-template-columns: 1fr;
	}
}



/**
 * Docs Publisher for Confluence - Admin Styles
 * Custom CSS (No Tailwind)
 */

/* ===== FONT FACE DECLARATIONS ===== */
@font-face {
	font-family: 'Inter';
	src: url('fonts/Inter-Regular.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Inter';
	src: url('fonts/Inter-Medium.woff2') format('woff2');
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Inter';
	src: url('fonts/Inter-SemiBold.woff2') format('woff2');
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}

/* ===== CSS VARIABLES ===== */
:root {
	--color-primary: #2b6cee;
	--color-primary-hover: #1e5dd8;
	--color-primary-light: rgba(43, 108, 238, 0.1);
	--color-primary-border: rgba(43, 108, 238, 0.2);
	
	/* Light Theme Colors */
	--color-bg-light: #f6f6f8;
	--color-surface-light: #ffffff;
	--color-border-light: #e2e8f0;
	--color-text-main-light: #111318;
	--color-text-sub-light: #4b5563;
	
	/* Status Colors */
	--color-success: #10b981;
	--color-success-light: #d1fae5;
	--color-error: #ef4444;
	--color-error-light: #fee2e2;
	--color-warning: #f59e0b;
	--color-warning-light: #fef3c7;
}

/* ===== BASE STYLES ===== */
/**
 * Root container for all plugin UI components.
 * This wrapper ensures all plugin content (sidebar, header, content views, settings)
 * is contained within a single root element without interfering with WordPress
 * admin notices (displayed above) or the WordPress admin footer (displayed below).
 */
.dpfcrs-admin-wrapper {
	margin: 0;
	padding: 0;
	font-family: "Inter", sans-serif;
	min-height: calc(100vh - 32px - 36px);
	height: calc(100vh - 32px - 36px);
	width: 100%;
	background-color: var(--color-bg-light);
	color: var(--color-text-main-light);
	transition: background-color 0.2s, color 0.2s;
	-webkit-font-smoothing: antialiased;
	position: relative;
	z-index: 1;
	/* Ensure wrapper doesn't overlap WordPress admin notices or footer */
	overflow: hidden;
	border: 2px solid #e1e6ec;
	border-radius: 0.5rem;
	box-sizing: border-box;
	margin-top: 18px;
}

/* Hide WordPress admin sidebar on plugin pages */
.wp-admin.folded .dpfcrs-admin-wrapper ~ #wpcontent,
.wp-admin .dpfcrs-admin-wrapper ~ #wpcontent {
	margin-left: 0;
}

/* Remove WordPress admin padding when wrapper is present */
.wrap .dpfcrs-admin-wrapper,
#wpbody-content .dpfcrs-admin-wrapper {
	margin-left: -10px;
	margin-right: -10px;
	margin-top: calc(32px - 20px);
	margin-bottom: -20px;
	/* height: calc(100vh - 32px - 36px + 40px); */
	/* min-height: calc(100vh - 32px - 36px + 40px); */
}

/* Ensure WordPress sidebar stays below plugin sidebar */
#adminmenuback,
#adminmenuwrap,
#adminmenu {
	z-index: 9990;
}

.dpfcrs-admin-wrapper ~ .wrap h1,
.dpfcrs-admin-wrapper ~ .wrap .nav-tab-wrapper {
	display: none;
}

/* ===== LAYOUT ===== */
.dpfcrs-layout-flex {
	display: flex;
}

.dpfcrs-layout-flex-col {
	display: flex;
	flex-direction: column;
}

.dpfcrs-layout-flex-row {
	display: flex;
	flex-direction: row;
}

.dpfcrs-layout-min-h-screen {
	min-height: 100%;
	height: 100%;
	align-items: stretch;
}

.dpfcrs-layout-flex-1 {
	flex: 1;
}

.dpfcrs-layout-flex-wrap {
	flex-wrap: wrap;
}

/* ===== SIDEBAR ===== */
.dpfcrs-sidebar {
	width: 100%;
	background-color: #ffffff;
	border-right: 1px solid #e2e8f0;
	display: flex;
	flex-direction: column;
	transition: background-color 0.3s, border-color 0.3s;
	position: relative;
	min-height: 100%;
	height: 100%;
	z-index: 9991;
	overflow-x: hidden;
	overflow-y: auto;
	flex-shrink: 0;
	align-self: stretch;
}


.dpfcrs-sidebar-header {
	height: 4.5rem;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	padding: 0 .5rem;
	border-bottom: 1px solid #e2e8f0;
	flex-shrink: 0;
}


.dpfcrs-sidebar-logo {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	color: #111318;
	width: auto;
	margin-right: auto;
}


.dpfcrs-sidebar-logo img {
	height: 2.25rem;
	width: auto;
	object-fit: contain;
	flex-shrink: 0;
}

.dpfcrs-sidebar-logo-text {
	display: flex;
	flex-direction: column;
	gap: 0.0625rem;
	flex: 1;
	min-width: 0;
}

.dpfcrs-sidebar-logo-title {
	font-size: 1.1rem;
	font-weight: 700;
	line-height: 1.25rem;
	letter-spacing: -0.02em;
	margin: 0;
	color: #111318;
	white-space: normal;
	overflow: visible;
	word-wrap: break-word;
}


.dpfcrs-sidebar-logo-subtitle {
	font-size: 0.625rem;
	font-weight: 400;
	font-style: italic;
	line-height: 1rem;
	margin: 0;
	color: #6b7280;
}


.dpfcrs-sidebar-logo .dpfcrs-icon {
	color: var(--color-primary);
	width: 1.875rem;
	height: 1.875rem;
}

.dpfcrs-sidebar-logo span {
	font-size: 1.125rem;
	font-weight: 700;
	letter-spacing: -0.02em;
}

.dpfcrs-sidebar-nav {
	flex: 1;
	overflow-y: auto;
	overflow-x: hidden;
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	padding: 1rem 0.75rem;
	min-height: 0;
}

.dpfcrs-sidebar-nav-title {
	padding: 0.5rem 0.75rem;
	font-size: 0.75rem;
	font-weight: 600;
	color: #374151;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}


.dpfcrs-sidebar-nav-link {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.625rem 0.75rem;
	border-radius: 0.5rem;
	transition: all 0.2s;
	color: #374151;
	text-decoration: none;
	font-size: 0.8125rem;
}


.dpfcrs-sidebar-nav-link:hover {
	background-color: #f8fafc;
}

.dpfcrs-sidebar-nav-link:focus {
	outline: none !important;
	box-shadow: none !important;
}

.dpfcrs-sidebar-nav-link:active {
	outline: none !important;
	box-shadow: none !important;
}

.dpfcrs-sidebar-nav-link:focus-visible {
	outline: 2px solid var(--color-primary);
	outline-offset: 2px;
}

.dpfcrs-sidebar-nav-link.dpfcrs-nav-active {
	background-color: var(--color-primary-light);
	color: var(--color-primary);
	font-weight: 500;
}

.dpfcrs-sidebar-nav-link .dpfcrs-icon {
	width: 1.25rem;
	height: 1.25rem;
}

.dpfcrs-sidebar-nav-link.dpfcrs-nav-active .dpfcrs-icon {
	opacity: 1;
}

.dpfcrs-sidebar-nav-link:not(.dpfcrs-nav-active):hover .dpfcrs-icon {
	color: var(--color-primary);
}

.dpfcrs-sidebar-footer {
	padding: 1rem;
	flex-shrink: 0;
}


.dpfcrs-sidebar-user {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

.dpfcrs-sidebar-actions {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	margin-top: 1rem;
	padding-top: 1rem;
	border-top: 1px solid #e2e8f0;
}

.dpfcrs-sidebar-action-btn {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.625rem 0.75rem;
	border: none;
	background: none;
	color: #374151;
	font-size: 0.875rem;
	font-weight: 400;
	cursor: pointer;
	transition: all 0.2s;
	width: 100%;
	text-align: left;
	border-radius: 0.375rem;
}

.dpfcrs-sidebar-action-btn:hover {
	background-color: #f8fafc;
	color: var(--color-primary);
}

.dpfcrs-sidebar-action-btn:focus {
	outline: none !important;
	box-shadow: none !important;
}

.dpfcrs-sidebar-action-btn:active {
	outline: none !important;
	box-shadow: none !important;
}

.dpfcrs-sidebar-action-btn:focus-visible {
	outline: 2px solid var(--color-primary);
	outline-offset: 2px;
}

.dpfcrs-sidebar-action-btn .dpfcrs-icon {
	width: 1.125rem;
	height: 1.125rem;
	flex-shrink: 0;
}


/* ===== MAIN CONTENT ===== */
.dpfcrs-main-content {
	flex: 1;
	display: flex;
	flex-direction: column;
	min-height: 100%;
	height: 100%;
	align-self: stretch;
	margin-left: 0;
	width: 100%;
	transition: margin-left 0.2s;
}

/* ===== HEADER ===== */
.dpfcrs-header {
	height: 4.5rem;
	background-color: #ffffff;
	border-bottom: 1px solid #e2e8f0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 1.75rem;
	flex-shrink: 0;
	position: sticky;
	z-index: 9999;
}


.dpfcrs-header-left {
	display: flex;
	align-items: center;
	gap: 1rem;
}

.dpfcrs-header-menu-btn {
	color: #64748b;
	background: none;
	border: none;
	cursor: pointer;
	display: none;
}

.dpfcrs-header-menu-btn:hover {
	color: #475569;
}

.dpfcrs-header-title {
	color: #111318;
	font-size: 1.125rem;
	font-weight: 700;
	line-height: 1.75rem;
	letter-spacing: -0.02em;
	display: none;
}


.dpfcrs-header-right {
	display: flex;
	align-items: center;
	gap: 1.5rem;
}

.dpfcrs-header-help-btn {
	color: #64748b;
	background: none;
	border: none;
	cursor: pointer;
	transition: color 0.2s;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0.5rem;
	border-radius: 0.375rem;
	text-decoration: none;
}

.dpfcrs-header-help-btn:hover {
	color: var(--color-primary);
	background-color: rgba(43, 108, 238, 0.1);
}


.dpfcrs-header-divider {
	height: 2rem;
	width: 1px;
	background-color: #e2e8f0;
}


.dpfcrs-header-doc-link {
	font-size: 0.875rem;
	font-weight: 500;
	color: var(--color-primary);
	text-decoration: none;
	transition: color 0.2s;
}

.dpfcrs-header-doc-link:hover {
	color: var(--color-primary-hover);
}

/* ===== MAIN AREA ===== */
.dpfcrs-main-area {
	flex: 1;
	overflow-y: auto;
	overflow-x: hidden;
	padding: 1rem 1rem;
	scroll-behavior: smooth;
	height: calc(100vh - 32px - 4rem - 36px);
}

.dpfcrs-main-container {
	max-width: 1200px;
	margin: 0 auto;
	display: flex;
  width: 100%;
	flex-direction: column;
	gap: 2rem;
}

/* ===== PAGE HEADER ===== */
.dpfcrs-page-header {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: flex-end;
	gap: 1rem;
}

.dpfcrs-page-header-content {
	display: flex;
	min-width: 18rem;
	flex-direction: column;
	gap: 0.5rem;
}

.dpfcrs-page-title {
	font-size: 1.875rem;
	font-weight: 900;
	line-height: 1.2;
	letter-spacing: -0.033em;
}

.dpfcrs-page-description {
	color: var(--color-text-sub-light);
  font-size: 1rem;
	font-weight: 400;
	line-height: 1.5;
	max-width: 42rem;
}


.dpfcrs-page-header-actions {
	display: flex;
	gap: 0.75rem;
}

/* ===== BUTTONS ===== */
.dpfcrs-btn {
	display: flex;
	cursor: pointer;
	align-items: center;
	justify-content: center;
  overflow: hidden;
	border-radius: 0.5rem;
	height: 2.5rem;
	padding: 0 1rem;
	font-size: 0.875rem;
	font-weight: 700;
	transition: all 0.2s;
	border: none;
	text-decoration: none;
}

.dpfcrs-btn-primary {
	background-color: var(--color-primary);
	color: #ffffff;
	box-shadow: 0 4px 6px -1px rgba(43, 108, 238, 0.2);
}

.dpfcrs-btn-primary:hover {
	background-color: #1e5dd8;
}

.dpfcrs-btn-primary:active {
	transform: scale(0.95);
}

.dpfcrs-btn-secondary {
	background-color: var(--color-surface-light);
	border: 1px solid var(--color-border-light);
	color: var(--color-text-main-light);
}


.dpfcrs-btn-secondary:hover {
	background-color: #f8fafc;
}


.dpfcrs-btn-outline {
	background-color: rgba(43, 108, 238, 0.1);
	border: 1px solid rgba(43, 108, 238, 0.2);
	color: var(--color-primary);
}

.dpfcrs-btn-outline:hover {
	background-color: rgba(43, 108, 238, 0.2);
}

.dpfcrs-btn-icon {
	margin-right: 0.5rem;
	width: 1.25rem;
	height: 1.25rem;
	flex-shrink: 0;
}

.dpfcrs-btn:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

.dpfcrs-btn-lg {
	height: 3rem;
	padding: 0 1.5rem;
}

/* Remove Connection Icon Button */
.dpfcrs-remove-connection-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.75rem;
	height: 1.75rem;
	padding: 0;
	border: none;
	background: transparent;
	color: var(--color-text-sub-light);
	cursor: pointer;
	border-radius: 0.25rem;
	transition: all 0.2s ease;
	opacity: 0.6;
}

.dpfcrs-remove-connection-btn:hover {
	opacity: 1;
	background-color: rgba(239, 68, 68, 0.1);
	color: #ef4444;
}

.dpfcrs-remove-connection-btn:active {
	transform: scale(0.95);
}



/* ===== CARDS ===== */
.dpfcrs-card {
	background-color: var(--color-surface-light);
	border-radius: 0.75rem;
	box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
	border: 1px solid var(--color-border-light);
	overflow: hidden;
}


.dpfcrs-card-header {
	padding: 1.3rem 1.7rem;
	border-bottom: 1px solid var(--color-border-light);
	display: flex;
	justify-content: space-between;
	align-items: center;
}


.dpfcrs-card-title {
	font-size: 1.125rem;
	font-weight: 700;
	margin: 0 !important;
	margin-bottom: 0 !important;
	line-height: 1.2 !important;
}

.dpfcrs-card-header .dpfcrs-card-title {
	margin: 0 !important;
	margin-bottom: 0 !important;
	line-height: 1.2 !important;
}

.dpfcrs-card-description {
	color: var(--color-text-sub-light);
	font-size: 0.80rem;
	line-height: 1.5;
	margin: 0 !important;
	margin-top: 0.1875rem !important;
}

.dpfcrs-card-header .dpfcrs-card-description {
	margin: 0 !important;
	margin-top: 0.1875rem !important;
}

.dpfcrs-card-header .dpfcrs-flex-col {
	gap: 0.125rem!important;
}


.dpfcrs-card-body {
	padding: 1.5rem;
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
}

.dpfcrs-pricing-card .dpfcrs-card-body {
	padding: 1.25rem 1.5rem;
	flex: 1;
	display: flex;
	flex-direction: column;
}

/* ===== FORMS ===== */
.dpfcrs-form-fields-container {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.dpfcrs-form-group {
  display: flex;
	flex-direction: column;
}

.dpfcrs-form-label-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
}

.dpfcrs-form-label {
	font-size: 0.875rem;
	font-weight: 500;
	color: var(--color-text-main-light);
}


.dpfcrs-form-input-wrapper {
	position: relative;
}

.dpfcrs-form-input {
	width: 100%;
	border-radius: 0.5rem !important;
	border: 1px solid #cbd5e1!important;
	background-color: #ffffff!important;
	color: var(--color-text-main-light);
  height: 2.75rem;
	padding: 0 0.75rem;
	font-size: 0.875rem;
	transition: all 0.2s;
	box-sizing: border-box;
}

.dpfcrs-form-input::placeholder {
	color: var(--color-text-sub-light);
	opacity: 0.6;
}



.dpfcrs-form-input:focus {
	outline: none;
	ring: 2px;
	ring-color: var(--color-primary);
	border-color: var(--color-primary);
	box-shadow: 0 0 0 2px rgba(43, 108, 238, 0.2);
}

.dpfcrs-form-input-icon-left {
	padding-left: 2.5rem !important;
}

.dpfcrs-form-input-icon-right {
	padding-right: 2.5rem !important;
}

.dpfcrs-form-icon-left {
	position: absolute;
	left: 0.75rem;
	top: 50%;
	transform: translateY(-50%);
	color: var(--color-text-sub-light);
	display: flex;
	align-items: center;
	justify-content: center;
	pointer-events: none;
	z-index: 1;
	width: 1.25rem;
	height: 1.25rem;
	line-height: 0;
}


.dpfcrs-form-icon-left .dpfcrs-icon {
	width: 1.25rem;
	height: 1.25rem;
	flex-shrink: 0;
}

.dpfcrs-form-icon-left .dpfcrs-icon svg {
	width: 1.25rem;
	height: 1.25rem;
	display: block;
}

.dpfcrs-form-icon-right {
	position: absolute;
	right: 0.75rem;
	top: 50%;
	transform: translateY(-50%);
	color: var(--color-text-sub-light);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: color 0.2s;
	z-index: 1;
	background: none;
	border: none;
	padding: 0;
	width: 1.25rem;
	height: 1.25rem;
	line-height: 0;
}


.dpfcrs-form-icon-right:hover {
	color: var(--color-primary);
}

.dpfcrs-form-icon-right .dpfcrs-icon {
	width: 1.25rem;
	height: 1.25rem;
	flex-shrink: 0;
}

.dpfcrs-form-icon-right .dpfcrs-icon svg {
	width: 1.25rem;
	height: 1.25rem;
	display: block;
}

.dpfcrs-form-help-text {
	font-size: 0.75rem;
	color: var(--color-text-sub-light);
	margin-top: 0.125rem;
	margin-bottom: 0;
}


.dpfcrs-form-select {
	width: 100%;
	appearance: none;
	border-radius: 0.5rem!important;
	border: 1px solid #cbd5e1!important; 
	background-color: #ffffff!important;
	color: var(--color-text-main-light)!important;
	height: 2.75rem;
	padding: 0 2.5rem 0 0.75rem;
	font-size: 0.875rem;
	cursor: pointer;
	transition: all 0.2s;
}


.dpfcrs-form-select:focus {
	outline: none;
	border-color: var(--color-primary);
	box-shadow: 0 0 0 2px rgba(43, 108, 238, 0.2);
}

.dpfcrs-form-select-icon {
	position: absolute;
	right: 0.75rem;
	top: 50%;
	transform: translateY(-50%);
	pointer-events: none;
	color: var(--color-text-sub-light);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 1;
}

.dpfcrs-form-select-icon .dpfcrs-icon {
	width: 1.25rem;
	height: 1.25rem;
}

.dpfcrs-form-select-icon-left {
	padding-left: 2.5rem !important;
}

/* ===== GRID SYSTEM ===== */
.dpfcrs-grid {
	display: grid;
	gap: 1.5rem;
}

.dpfcrs-grid-cols-1 {
	grid-template-columns: repeat(1, minmax(0, 1fr));
}

.dpfcrs-grid-cols-2 {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.dpfcrs-grid-cols-3 {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.dpfcrs-grid-cols-12 {
	grid-template-columns: repeat(12, minmax(0, 1fr));
}

.dpfcrs-col-span-2 {
	grid-column: span 2 / span 2;
}

.dpfcrs-col-span-4 {
	grid-column: span 4 / span 4;
}

.dpfcrs-col-span-8 {
	grid-column: span 8 / span 8;
}

/* ===== STATUS BADGE ===== */
.dpfcrs-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	font-size: 0.75rem;
	font-weight: 500;
	padding: 0.5rem 0.75rem;
	border-radius: 9999px;
}

.dpfcrs-badge-success {
	background-color: #d1fae5;
	color: #047857;
}


.dpfcrs-badge-pulse {
	width: 0.375rem;
	height: 0.375rem;
	border-radius: 9999px;
	background-color: #10b981;
	animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes pulse {
	0%, 100% {
		opacity: 1;
	}
  50% {
    opacity: .5;
  }
}

/* ===== TABLE ===== */
.dpfcrs-table-container {
	overflow-x: auto;
}

.dpfcrs-table {
	width: 100%;
	text-align: left;
	font-size: 0.875rem;
}

.dpfcrs-table thead {
	background-color: var(--color-bg-light);
	border-bottom: 1px solid var(--color-border-light);
	color: var(--color-text-sub-light);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	font-size: 0.75rem;
	font-weight: 600;
}


.dpfcrs-table th {
	padding: 1rem 1.5rem;
}

.dpfcrs-table tbody {
	divide-y: 1px solid var(--color-border-light);
}


.dpfcrs-table tbody tr {
	transition: background-color 0.2s;
	border-bottom: 1px solid var(--color-border-light);
}


.dpfcrs-table tbody tr:hover {
	background-color: var(--color-bg-light);
}


.dpfcrs-table td {
	padding: 1rem 1.5rem;
}

.dpfcrs-table-cell-flex {
	display: flex;
  align-items: center;
	gap: 0.75rem;
}

.dpfcrs-table-avatar {
	width: 2rem;
	height: 2rem;
	border-radius: 0.25rem;
	background-color: #dbeafe;
	display: flex;
	align-items: center;
  justify-content: center;
	color: var(--color-primary);
	font-weight: 700;
}


.dpfcrs-table-text-main {
	font-weight: 500;
	color: var(--color-text-main-light);
}


.dpfcrs-table-text-sub {
	color: var(--color-text-sub-light);
	font-family: monospace;
	font-size: 0.75rem;
}


.dpfcrs-table-status {
	display: flex;
	align-items: center;
	gap: 0.375rem;
}

.dpfcrs-table-status-dot {
	width: 0.375rem;
	height: 0.375rem;
	border-radius: 9999px;
	background-color: #10b981;
}

.dpfcrs-table-text-center {
	text-align: center;
}

.dpfcrs-table-text-right {
	text-align: right;
}

/* ===== MINIMAL MODERN TABLE DESIGN ===== */
.dpfcrs-table-modern {
	border-radius: 0.5rem;
	overflow: hidden;
	background: var(--color-surface-light);
	border: 1px solid var(--color-border-light);
}

.dpfcrs-table-spaces {
	border-collapse: separate;
	border-spacing: 0;
	width: 100%;
}

.dpfcrs-table-spaces thead {
	background: var(--color-bg-light);
	border-bottom: 1px solid var(--color-border-light);
}

.dpfcrs-table-spaces thead th {
	padding: 1rem 1.5rem;
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--color-text-sub-light);
}

.dpfcrs-table-spaces tbody tr {
	border-bottom: 1px solid var(--color-border-light);
}

.dpfcrs-table-spaces tbody tr:last-child {
	border-bottom: none;
}

.dpfcrs-table-spaces tbody td {
	padding: 1rem 1.5rem;
	vertical-align: middle;
}

.dpfcrs-table-col-space {
	width: 50%;
}

.dpfcrs-table-col-key {
	width: 30%;
}

.dpfcrs-table-col-sync {
	width: 20%;
	text-align: center;
}

.dpfcrs-table-cell-content {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

.dpfcrs-table-avatar-modern {
	width: 2.25rem;
	height: 2.25rem;
	border-radius: 0.375rem;
	background: var(--color-primary);
	display: flex;
	align-items: center;
	justify-content: center;
	color: #ffffff;
	font-weight: 600;
	font-size: 0.875rem;
	flex-shrink: 0;
}

.dpfcrs-table-cell-text {
	flex: 1;
	min-width: 0;
}

.dpfcrs-table-spaces .dpfcrs-table-text-main {
	font-size: 0.9375rem;
	font-weight: 500;
	color: var(--color-text-main-light);
	line-height: 1.5;
	display: block;
}

.dpfcrs-table-key-badge {
	display: inline-block;
	font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', monospace;
	font-size: 0.8125rem;
	color: var(--color-text-sub-light);
	background: transparent;
	padding: 0;
	font-weight: 500;
	letter-spacing: 0.025em;
}

.dpfcrs-table-cell-sync {
	text-align: center;
}

.dpfcrs-table-cell-sync .dpfcrs-toggle-wrapper {
	display: inline-flex;
	justify-content: center;
}

@media (max-width: 768px) {
	.dpfcrs-table-spaces thead th,
	.dpfcrs-table-spaces tbody td {
		padding: 0.875rem 1rem;
	}
	
	.dpfcrs-table-avatar-modern {
		width: 2rem;
		height: 2rem;
		font-size: 0.8125rem;
	}
	
	.dpfcrs-table-cell-content {
		gap: 0.625rem;
	}
}

/* ===== TOGGLE SWITCH ===== */
.dpfcrs-toggle-wrapper {
	position: relative;
	display: inline-flex;
	align-items: center;
	cursor: pointer;
}

.dpfcrs-toggle-input {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
  overflow: hidden;
	clip: rect(0, 0, 0, 0);
  white-space: nowrap;
	border-width: 0;
}

.dpfcrs-toggle {
	width: 2.75rem;
	height: 1.5rem;
	background-color: #d1d5db;
  border-radius: 9999px;
	position: relative;
	transition: background-color 0.2s;
}


.dpfcrs-toggle:after {
	content: '';
	position: absolute;
	top: 0.125rem;
	left: 0.125rem;
	background-color: #ffffff;
	border: 1px solid #d1d5db;
	border-radius: 9999px;
	height: 1.25rem;
	width: 1.25rem;
	transition: transform 0.2s;
}


.dpfcrs-toggle-input:checked + .dpfcrs-toggle {
	background-color: var(--color-primary);
}

.dpfcrs-toggle-input:checked + .dpfcrs-toggle:after {
	transform: translateX(1.25rem);
	border-color: #ffffff;
}

.dpfcrs-toggle-input:focus + .dpfcrs-toggle {
	outline: none;
	box-shadow: 0 0 0 2px rgba(43, 108, 238, 0.5);
}


/* ===== FILTER & SEARCH ===== */
.dpfcrs-filter-group {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0 0.25rem;
}

.dpfcrs-filter-title {
	font-size: 1.25rem;
	font-weight: 700;
	color: var(--color-text-main-light);
}


.dpfcrs-filter-actions {
	display: flex;
	gap: 0.5rem;
}

.dpfcrs-filter-input {
	height: 2.25rem;
	width: 16rem;
	border-radius: 0.5rem!important;
	border: 1px solid #cbd5e1!important;;
	background-color: var(--color-surface-light);
	padding-left: 2.25rem;
	padding-right: 0.75rem;
	font-size: 0.875rem;
}


.dpfcrs-filter-input:focus {
	outline: none;
	box-shadow: 0 0 0 1px var(--color-primary);
}

.dpfcrs-filter-btn {
	height: 2.25rem;
	padding: 0 0.75rem;
	border-radius: 0.5rem;
	border: 1px solid var(--color-border-light);
	background-color: var(--color-surface-light);
	display: flex;
	align-items: center;
	color: var(--color-text-sub-light);
	transition: all 0.2s;
	font-size: 0.75rem;
	font-weight: 500;
	cursor: pointer;
}


.dpfcrs-filter-btn:hover {
	background-color: var(--color-bg-light);
}


/* ===== TOAST NOTIFICATIONS ===== */
#dpfcrs-toast-container {
	position: fixed;
	top: calc(32px + 4.5rem + 2rem);
	right: 2rem;
	z-index: 10000;
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	pointer-events: none;
	max-width: 28rem;
}

.dpfcrs-toast {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.75rem 1.25rem;
	border-radius: 0.5rem;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
	border: none;
	background: #1e293b;
	color: #f1f5f9;
	font-size: 0.875rem;
	font-weight: 500;
	max-width: 28rem;
	pointer-events: auto;
	animation: slideInRight 0.3s ease-out;
}

@keyframes slideInRight {
	from {
		transform: translateX(100%);
		opacity: 0;
	}
	to {
		transform: translateX(0);
		opacity: 1;
	}
}

.dpfcrs-toast-success {
	background: #1e293b;
	color: #f1f5f9;
}

.dpfcrs-toast-error {
	background: #1e293b;
	color: #f1f5f9;
}

.dpfcrs-toast-info {
	background: #1e293b;
	color: #f1f5f9;
}

.dpfcrs-toast-icon {
	width: 1.25rem;
	height: 1.25rem;
	flex-shrink: 0;
}

.dpfcrs-toast-icon.dpfcrs-toast-icon-success {
	color: #4ade80;
}

.dpfcrs-toast-icon.dpfcrs-toast-icon-error {
	color: #f87171;
}

.dpfcrs-toast-icon.dpfcrs-toast-icon-info {
	color: #60a5fa;
}


.dpfcrs-toast-message {
	flex: 1;
	font-size: 0.875rem;
	font-weight: 500;
}

.dpfcrs-toast-close {
	background: none;
	border: none;
	cursor: pointer;
	opacity: 0.5;
	transition: opacity 0.2s;
	color: #f1f5f9;
	padding: 0;
	display: flex;
	align-items: center;
	margin-left: 0.25rem;
}

.dpfcrs-toast-close:hover {
	opacity: 1;
}

/* ===== ALERT/INFO BOX ===== */
.dpfcrs-alert {
	padding: 1rem 1.25rem;
	border-radius: 0.5rem;
	border: 1px solid;
	border-left-width: 4px;
	display: flex;
	align-items: flex-start;
	gap: 0.875rem;
	background-color: #ffffff;
}

.dpfcrs-alert-success {
	background-color: #f0fdf4;
	border-color: #bbf7d0;
	border-left-color: #16a34a;
}

.dpfcrs-alert-warning {
	background-color: #fffbeb;
	border-color: #fde68a;
	border-left-color: #f59e0b;
}

.dpfcrs-alert-info {
	background-color: #eff6ff;
	border-color: #bfdbfe;
	border-left-color: #3b82f6;
}

.dpfcrs-alert-icon-wrapper {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	margin-top: 0.1rem;
}

.dpfcrs-alert-icon {
	color: #16a34a;
	width: 1.25rem;
	height: 1.25rem;
	flex-shrink: 0;
}

.dpfcrs-alert-warning .dpfcrs-alert-icon {
	color: #f59e0b;
}

.dpfcrs-alert-info .dpfcrs-alert-icon {
	color: #3b82f6;
}

.dpfcrs-alert-content {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	min-width: 0;
}

.dpfcrs-alert-title {
	color: #14532d;
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1.4;
	margin: 0 !important;
	padding: 0 !important;
}

.dpfcrs-alert-warning .dpfcrs-alert-title {
	color: #92400e;
}

.dpfcrs-alert-info .dpfcrs-alert-title {
	color: #1e40af;
}

.dpfcrs-alert-text {
	color: #166534;
	font-size: 0.875rem;
	line-height: 1.5;
	margin: 0 !important;
	padding: 0 !important;
}

.dpfcrs-alert-warning .dpfcrs-alert-text {
	color: #78350f;
}

.dpfcrs-alert-info .dpfcrs-alert-text {
	color: #1d4ed8;
}


/* ===== RADIO CARD ===== */
.dpfcrs-radio-card-wrapper {
	position: relative;
	display: flex;
	cursor: pointer;
}

.dpfcrs-radio-card-input {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border-width: 0;
}

.dpfcrs-radio-card {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 0.5rem;
	border-radius: 0.5rem;
	border: 2px solid var(--color-border-light);
	background-color: var(--color-surface-light);
	padding: 0.875rem;
	transition: all 0.2s;
}


.dpfcrs-radio-card-wrapper:hover .dpfcrs-radio-card {
	border-color: #cbd5e1;
}


.dpfcrs-radio-card-input:checked + .dpfcrs-radio-card {
	border-color: var(--color-primary);
	box-shadow: 0 0 0 1px var(--color-primary);
	background-color: rgba(43, 108, 238, 0.05);
}


.dpfcrs-radio-card-header {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	position: relative;
}

.dpfcrs-radio-card-icon {
	color: var(--color-text-main-light);
	width: 1.5rem;
	height: 1.5rem;
	flex-shrink: 0;
}


.dpfcrs-radio-card-indicator {
	height: 1rem;
	width: 1rem;
	border-radius: 9999px;
	border: 1px solid var(--color-border-light);
}

.dpfcrs-radio-card-input:checked + .dpfcrs-radio-card .dpfcrs-radio-card-indicator {
	border-color: var(--color-primary);
	background-color: var(--color-primary);
}

.dpfcrs-radio-card-content {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
}

.dpfcrs-radio-card-title {
	color: var(--color-text-main-light);
  font-size: 1rem;
  font-weight: 700;
}


.dpfcrs-radio-card-description {
	color: var(--color-text-sub-light);
	font-size: 0.875rem;
  line-height: 1.5;
}


/* ===== CHECKBOX ===== */
.dpfcrs-checkbox {
	border-radius: 0.25rem;
	border: 1px solid #d1d5db;
	color: var(--color-primary);
	height: 1rem;
	width: 1rem;
	cursor: pointer;
}

.dpfcrs-checkbox:focus {
	box-shadow: 0 0 0 2px rgba(43, 108, 238, 0.2);
}

/* ===== PAGE TREE ===== */
#dpfcrs-pages-tree {
	font-family: "Inter", sans-serif;
	max-height: 37.5rem;
	overflow-y: auto;
	border: 1px solid var(--color-border-light);
	border-radius: 0.5rem;
	padding: 1rem;
	background-color: #fcfcfd;
}


.page-item {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.5rem;
	border-radius: 0.25rem;
	transition: background-color 0.15s;
}

.page-item:hover {
	background-color: rgba(43, 108, 238, 0.05);
}

/* Page ID Container */
.dpfcrs-page-id-container {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	padding: 0.25rem 0.5rem;
	background-color: #f1f5f9;
	border-radius: 0.375rem;
	border: 1px solid #e2e8f0;
}

.dpfcrs-page-id-text {
	color: #475569;
	font-size: 0.75rem;
	line-height: 1.25rem;
}

.dpfcrs-page-id-copy {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.125rem;
	background: transparent;
	border: none;
	border-radius: 0.25rem;
	cursor: pointer;
	color: #64748b;
	transition: all 0.15s ease;
	line-height: 1;
}

.dpfcrs-page-id-copy:hover {
	color: #2b6cef;
	background-color: rgba(43, 108, 238, 0.1);
}

.dpfcrs-page-id-copy:active {
	transform: scale(0.95);
}

/* Last Sync Time */
.dpfcrs-last-sync-time {
	color: #64748b;
	font-size: 0.75rem;
	line-height: 1.25rem;
	padding: 0.25rem 0.5rem;
	background-color: #f8fafc;
	border-radius: 0.375rem;
	border: 1px solid #e2e8f0;
	white-space: nowrap;
}

.dpfcrs-page-id-copy .dpfcrs-icon {
	width: 14px;
	height: 14px;
}


.dpfcrs-page-checkbox:checked + .dpfcrs-icon {
	color: var(--color-primary);
}

.dpfcrs-page-checkbox:checked ~ span {
	color: var(--color-primary);
	font-weight: 500;
}

/* ===== LOADING SPINNER ===== */
.dpfcrs-loading {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.75rem;
	padding: 3rem 0;
}

.dpfcrs-loading-icon {
	color: var(--color-primary);
	width: 2.25rem;
	height: 2.25rem;
	flex-shrink: 0;
	animation: spin 1s linear infinite;
}

@keyframes spin {
	from {
		transform: rotate(0deg);
	}
	to {
		transform: rotate(360deg);
	}
}

.dpfcrs-loading-text {
	color: var(--color-text-sub-light);
	font-size: 0.875rem;
}


/* ===== SVG ICONS ===== */
.dpfcrs-icon {
	display: inline-block;
	vertical-align: middle;
	flex-shrink: 0;
}

.dpfcrs-icon svg {
	width: 100%;
	height: 100%;
	display: block;
}

/* ===== SCROLLBAR ===== */
.dpfcrs-admin-wrapper ::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.dpfcrs-admin-wrapper ::-webkit-scrollbar-track {
  background: transparent;
}

.dpfcrs-admin-wrapper ::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 4px;
}


/* ===== UTILITY CLASSES ===== */
.dpfcrs-hidden {
  display: none;
}

.dpfcrs-flex {
	display: flex;
}

.dpfcrs-flex-col {
	flex-direction: column;
}

.dpfcrs-items-center {
	align-items: center;
}

.dpfcrs-justify-between {
	justify-content: space-between;
}

.dpfcrs-justify-end {
	justify-content: flex-end;
}

.dpfcrs-gap-1 {
	gap: 0.25rem;
}

.dpfcrs-gap-2 {
	gap: 0.5rem;
}

.dpfcrs-gap-3 {
	gap: 0.75rem;
}

.dpfcrs-gap-4 {
	gap: 1rem;
}

.dpfcrs-gap-5 {
	gap: 1.25rem;
}

.dpfcrs-gap-6 {
	gap: 1.5rem;
}

.dpfcrs-gap-8 {
	gap: 2rem;
}

.dpfcrs-gap-10 {
	gap: 2.5rem;
}

.dpfcrs-mb-1 {
	margin-bottom: 0.25rem;
}

.dpfcrs-mb-2 {
	margin-bottom: 0.5rem;
}

.dpfcrs-mb-4 {
	margin-bottom: 1rem;
}

.dpfcrs-mb-6 {
	margin-bottom: 1.5rem;
}

.dpfcrs-mt-2 {
	margin-top: 0.5rem;
}

.dpfcrs-mt-6 {
	margin-top: 1.5rem;
}

.dpfcrs-pt-2 {
	padding-top: 0.5rem;
}

.dpfcrs-pt-4 {
	padding-top: 1rem;
}

.dpfcrs-pt-6 {
	padding-top: 1.5rem;
}

.dpfcrs-pb-8 {
	padding-bottom: 2rem;
}

.dpfcrs-px-4 {
	padding-left: 1rem;
	padding-right: 1rem;
}

.dpfcrs-px-5 {
	padding-left: 1.25rem;
	padding-right: 1.25rem;
}

.dpfcrs-px-6 {
	padding-left: 1.5rem;
	padding-right: 1.5rem;
}

.dpfcrs-py-8 {
	padding-top: 2rem;
	padding-bottom: 2rem;
}

.dpfcrs-py-12 {
	padding-top: 3rem;
	padding-bottom: 3rem;
}

.dpfcrs-p-4 {
	padding: 1rem;
}

.dpfcrs-p-5 {
	padding: 1.25rem;
}

.dpfcrs-p-6 {
	padding: 1.5rem;
}

.dpfcrs-p-8 {
	padding: 2rem;
}

.dpfcrs-w-full {
	width: 100%;
}

.dpfcrs-max-w-2xl {
	max-width: 42rem;
}

.dpfcrs-max-w-xl {
	max-width: 36rem;
}

.dpfcrs-text-center {
	text-align: center;
}

.dpfcrs-text-xs {
	font-size: 0.75rem;
}

.dpfcrs-text-sm {
	font-size: 0.875rem;
}

.dpfcrs-text-base {
	font-size: 1rem;
}

.dpfcrs-text-lg {
	font-size: 1.125rem;
}

.dpfcrs-text-xl {
	font-size: 1.25rem;
}

.dpfcrs-text-2xl {
	font-size: 1.5rem;
}

.dpfcrs-text-3xl {
	font-size: 1.875rem;
}

.dpfcrs-font-medium {
	font-weight: 500;
}

.dpfcrs-font-semibold {
	font-weight: 600;
}

.dpfcrs-font-bold {
	font-weight: 700;
}

.dpfcrs-leading-tight {
	line-height: 1.25;
}

.dpfcrs-tracking-tight {
	letter-spacing: -0.025em;
}

.dpfcrs-border-t {
	border-top: 1px solid var(--color-border-light);
}


.dpfcrs-rounded-lg {
	border-radius: 0.5rem;
}

.dpfcrs-rounded-xl {
	border-radius: 0.75rem;
}

.dpfcrs-rounded-full {
	border-radius: 9999px;
}

.dpfcrs-animate-spin {
	animation: spin 1s linear infinite;
}

.animate-spin-slow {
	animation: spin 3s linear infinite;
}

.animate-slide-in {
	animation: slideInRight 0.3s ease-out;
}

/* ===== RESPONSIVE DESIGN ===== */
@media (min-width: 640px) {
	.sm\:dpfcrs-grid-cols-3 {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
	
	.sm\:dpfcrs-flex-row {
		flex-direction: row;
	}
	
	.sm\:dpfcrs-items-center {
		align-items: center;
	}
	
	.sm\:dpfcrs-block {
		display: block;
	}
}

@media (min-width: 768px) {
	.dpfcrs-sidebar {
		width: 13rem;
	}
	
	.dpfcrs-main-content {
		margin-left: 0;
	}
	
	.md\:dpfcrs-flex-row {
		flex-direction: row;
	}
	
	.md\:dpfcrs-grid-cols-2 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	
	.md\:dpfcrs-grid-cols-3 {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
	
	.md\:dpfcrs-p-8 {
		padding: 2rem;
	}
	
	.md\:dpfcrs-px-12 {
		padding-left: 3rem;
		padding-right: 3rem;
	}
	
	.md\:dpfcrs-py-12 {
		padding-top: 3rem;
		padding-bottom: 3rem;
	}
	
	.md\:dpfcrs-hidden {
		display: none;
	}
	
	.md\:dpfcrs-items-end {
		align-items: flex-end;
	}
	
	.md\:dpfcrs-w-auto {
		width: auto;
	}
	
	.dpfcrs-header-title {
		display: block;
	}
	
	.dpfcrs-header-menu-btn {
		display: none;
	}
	
}

@media (min-width: 1024px) {
	.lg\:dpfcrs-grid-cols-3 {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
	
	.lg\:dpfcrs-grid-cols-12 {
		grid-template-columns: repeat(12, minmax(0, 1fr));
	}
	
	.lg\:dpfcrs-col-span-1 {
		grid-column: span 1 / span 1;
	}
	
	.lg\:dpfcrs-col-span-2 {
		grid-column: span 2 / span 2;
	}
	
	.lg\:dpfcrs-col-span-4 {
		grid-column: span 4 / span 4;
	}
	
	.lg\:dpfcrs-col-span-8 {
		grid-column: span 8 / span 8;
	}
	
	.lg\:dpfcrs-order-1 {
		order: 1;
	}
	
	.lg\:dpfcrs-order-2 {
		order: 2;
	}
}

/* ===== ADDITIONAL HELPER CLASSES ===== */
.dpfcrs-min-w-72 {
	min-width: 18rem;
}

.dpfcrs-min-w-200 {
	min-width: 200px;
}

.dpfcrs-h-9 {
	height: 2.25rem;
}

.dpfcrs-h-10 {
	height: 2.5rem;
}

.dpfcrs-h-11 {
	height: 2.75rem;
}

.dpfcrs-h-12 {
	height: 3rem;
}

.dpfcrs-w-64 {
	width: 16rem;
}

.dpfcrs-opacity-0 {
	opacity: 0;
}

.dpfcrs-opacity-100 {
	opacity: 1;
}

.dpfcrs-transition-opacity {
	transition: opacity 0.2s;
}

.dpfcrs-absolute {
	position: absolute;
}

.dpfcrs-relative {
	position: relative;
}

.dpfcrs-top-3 {
	top: 0.75rem;
}

.dpfcrs-right-3 {
	right: 0.75rem;
}

.dpfcrs-flex-1 {
	flex: 1;
}

.dpfcrs-overflow-hidden {
	overflow: hidden;
}

.dpfcrs-shadow-sm {
	box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

.dpfcrs-shadow-md {
	box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.dpfcrs-cursor-pointer {
	cursor: pointer;
}

/* Badge variant for small tag */
.dpfcrs-tag {
	display: inline-flex;
	align-items: center;
	font-size: 0.75rem;
	font-weight: 700;
	padding: 0.125rem 0.5rem;
	border-radius: 0.25rem;
	background-color: rgba(43, 108, 238, 0.1);
	color: var(--color-primary);
}

.dpfcrs-tag-small {
	font-size: 0.75rem;
	background-color: #f1f5f9;
	color: #64748b;
	padding: 0.125rem 0.375rem;
	margin-left: auto;
}

/* Premium Badge */
.dpfcrs-premium-badge {
	display: inline-flex;
	align-items: center;
	font-size: 0.625rem;
	font-weight: 700;
	padding: 0.25rem 0.5rem;
	border-radius: 0.25rem;
	background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
	color: #ffffff;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1);
	position: absolute;
	top: -0.5rem;
	right: -0.5rem;
	z-index: 10;
}

.dpfcrs-radio-card-header .dpfcrs-premium-badge {
	position: absolute;
	top: -0.5rem;
	right: -0.5rem;
}

.dpfcrs-text-sm.dpfcrs-font-semibold .dpfcrs-premium-badge {
	position: static;
	margin-left: 0.5rem;
}

/* Premium Notice */
.dpfcrs-premium-notice {
	background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
	border: 1px solid #fde68a;
	border-radius: 0.75rem;
	padding: 1.125rem 1.375rem;
	box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.04);
}

.dpfcrs-premium-notice-content {
	display: flex;
	align-items: center;
	gap: 1rem;
	flex-wrap: wrap;
}

.dpfcrs-premium-notice-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	height: 2.25rem;
	background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
	border-radius: 0.5rem;
	flex-shrink: 0;
	color: #ffffff;
	opacity: 0.9;
}

.dpfcrs-premium-notice-icon .dpfcrs-icon {
	width: 1.375rem;
	height: 1.375rem;
}

.dpfcrs-premium-notice-text {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	min-width: 200px;
}

.dpfcrs-premium-notice-text strong {
	font-size: 0.875rem;
	font-weight: 600;
	color: #92400e;
	line-height: 1.4;
}

.dpfcrs-premium-notice-text span {
	font-size: 0.8125rem;
	color: #a16207;
	line-height: 1.5;
}

.dpfcrs-premium-notice-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.5625rem 1.125rem;
	background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
	color: #ffffff;
	font-size: 0.8125rem;
	font-weight: 500;
	border-radius: 0.5rem;
	text-decoration: none;
	transition: all 0.2s;
	box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.08);
	white-space: nowrap;
	opacity: 0.95;
}

.dpfcrs-premium-notice-button:hover {
	background: linear-gradient(135deg, #d97706 0%, #b45309 100%);
	box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.12);
	opacity: 1;
	color: #ffffff;
	text-decoration: none;
	transform: translateY(-0.5px);
}

@media (max-width: 768px) {
	.dpfcrs-premium-notice-content {
		flex-direction: column;
		align-items: stretch;
	}
	
	.dpfcrs-premium-notice-icon {
		align-self: flex-start;
	}
	
	.dpfcrs-premium-notice-button {
		width: 100%;
		justify-content: center;
	}
}


/* Order utilities for responsive layouts */
.dpfcrs-order-1 {
	order: 1;
}

.dpfcrs-order-2 {
	order: 2;
}

/* Space badge in page tree */
.dpfcrs-space-badge {
	font-size: 0.75rem;
	padding: 0.125rem 0.5rem;
	border-radius: 0.25rem;
	background-color: rgba(43, 108, 238, 0.1);
	color: var(--color-primary);
	font-weight: 500;
}


/* Text color utilities */
.dpfcrs-text-primary {
	color: var(--color-primary);
}

.dpfcrs-text-main {
	color: var(--color-text-main-light);
}


.dpfcrs-text-sub {
	color: var(--color-text-sub-light);
}


/* Link styling */
.dpfcrs-link {
	color: var(--color-primary);
	text-decoration: underline;
	font-weight: 500;
}

.dpfcrs-link:hover {
	text-decoration: none;
}

.dpfcrs-text-link {
	color: var(--color-primary);
	font-weight: 500;
	cursor: pointer;
	background: none;
	border: none;
	padding: 0;
	margin: 0;
	text-decoration: none;
	transition: all 0.2s;
	font-family: inherit;
	font-size: inherit;
	line-height: inherit;
}

button.dpfcrs-text-link {
	display: inline;
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	outline: none;
}

.dpfcrs-text-link:hover {
	text-decoration: underline;
	color: #1e5dd8;
}

.dpfcrs-text-link:active {
	opacity: 0.8;
}

.dpfcrs-text-link:focus {
	outline: none;
}

.dpfcrs-text-link:focus-visible {
	outline: 2px solid var(--color-primary);
	outline-offset: 2px;
	border-radius: 0.25rem;
}

/* Divider */
.dpfcrs-divider {
	border-top: 1px solid var(--color-border-light);
	margin: 1rem 0;
}


/* Selected count styling */
#dpfcrs-selected-count {
	font-size: 0.875rem;
	color: var(--color-text-sub-light);
}


/* Error message box */
#dpfcrs-pages-error {
	padding: 1rem;
	background-color: #fef2f2;
	border: 1px solid #fecaca;
	border-radius: 0.5rem;
}


#dpfcrs-pages-error p {
	color: #991b1b;
	font-size: 0.875rem;
}

/* ===== MODAL STYLES ===== */
.dpfcrs-modal {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 100000;
	align-items: center;
	justify-content: center;
	opacity: 0;
	transition: opacity 0.2s ease-in-out;
}

.dpfcrs-modal[aria-hidden="false"] {
	display: flex;
	opacity: 1;
}

.dpfcrs-modal-overlay {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(0, 0, 0, 0.5);
	backdrop-filter: blur(2px);
}

.dpfcrs-modal-content {
	position: relative;
	background-color: #ffffff;
	border-radius: 0.75rem;
	box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
	width: 90%;
	max-width: 500px;
	max-height: 90vh;
	display: flex;
	flex-direction: column;
	z-index: 1;
	transform: scale(0.95);
	transition: transform 0.2s ease-in-out;
}

.dpfcrs-modal[aria-hidden="false"] .dpfcrs-modal-content {
	transform: scale(1);
}

.dpfcrs-modal-header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	padding: 1.5rem;
	border-bottom: 1px solid #e2e8f0;
	position: relative;
	gap: 1rem;
}

.dpfcrs-modal-title {
	font-size: 1.25rem;
	font-weight: 700;
	color: #111318;
	margin: 0;
}

.dpfcrs-modal-description {
	margin: 0;
	margin-top: 0.5rem;
	line-height: 1.5;
}

.dpfcrs-modal-close {
	background: none;
	border: none;
	cursor: pointer;
	color: #64748b;
	padding: 0.25rem;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 0.375rem;
	transition: all 0.2s;
}

.dpfcrs-modal-close:hover {
	background-color: #f8fafc;
	color: #111318;
}

.dpfcrs-modal-close .dpfcrs-icon {
	width: 1.25rem;
	height: 1.25rem;
}

.dpfcrs-modal-form {
	padding: 1.5rem;
	overflow-y: auto;
	flex: 1;
}

.dpfcrs-form-group {
	margin-bottom: 1.5rem;
}

.dpfcrs-form-group:last-child {
	margin-bottom: 0;
}

.dpfcrs-form-label {
	display: block;
	font-size: 0.875rem;
	font-weight: 500;
	color: #111318;
	margin-bottom: 0.625rem;
}

.dpfcrs-required {
	color: #ef4444;
	margin-left: 0.25rem;
}

.dpfcrs-form-input,
.dpfcrs-form-textarea {
	width: 100%;
	padding: 0.625rem 0.75rem;
	border: 1px solid #cbd5e1;
	border-radius: 0.5rem;
	font-size: 0.875rem;
	color: #111318;
	background-color: #ffffff;
	transition: border-color 0.2s;
	font-family: inherit;
}

.dpfcrs-form-input:focus,
.dpfcrs-form-textarea:focus {
	outline: none;
	border-color: var(--color-primary);
	box-shadow: 0 0 0 3px var(--color-primary-light);
}

.dpfcrs-form-textarea {
	resize: vertical;
	min-height: 100px;
}

.dpfcrs-modal-actions {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 0.75rem;
	margin-top: 1.5rem;
	padding-top: 1.5rem;
	border-top: 1px solid #e2e8f0;
}

.dpfcrs-btn {
	padding: 0.625rem 1.25rem;
	border-radius: 0.5rem;
	font-size: 0.875rem;
	font-weight: 500;
	cursor: pointer;
	transition: all 0.2s;
	border: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
}

.dpfcrs-btn-primary {
	background-color: var(--color-primary);
	color: #ffffff;
}

.dpfcrs-btn-primary:hover {
	background-color: var(--color-primary-hover);
}

.dpfcrs-btn-primary:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

.dpfcrs-btn-secondary {
	background-color: #ffffff;
	color: #64748b;
	border: 1px solid #e2e8f0;
}

.dpfcrs-btn-secondary:hover {
	background-color: #f8fafc;
	border-color: #cbd5e1;
}

/* ===== WORDPRESS ADMIN MENU LOGO ===== */
/* Style the custom logo in WordPress admin menu */
#adminmenu .toplevel_page_dpfcrs-connection .wp-menu-image {
	width: 36px;
	height: 34px;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
}

#adminmenu .toplevel_page_dpfcrs-connection .wp-menu-image img {
	width: 20px;
	height: 20px;
	padding: 0;
	margin: 0 auto;
	display: block;
	object-fit: contain;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

#adminmenu .toplevel_page_dpfcrs-connection .wp-menu-image::before {
	display: none !important;
}

/* Ensure proper alignment when menu is folded */
.folded #adminmenu .toplevel_page_dpfcrs-connection .wp-menu-image img {
	width: 20px;
	height: 20px;
}

/* ===== PRICING PAGE STYLES ===== */
.dpfcrs-pricing-card {
	position: relative;
	display: flex;
	flex-direction: column;
	height: auto;
	max-width: 100%;
}

.dpfcrs-pricing-card-featured {
	border: 2px solid var(--color-primary);
	box-shadow: 0 4px 6px -1px rgba(43, 108, 238, 0.1);
}

.dpfcrs-pricing-badge {
	position: absolute;
	top: -0.75rem;
	left: 50%;
	transform: translateX(-50%);
	background-color: var(--color-primary);
	color: #ffffff;
	font-size: 0.75rem;
	font-weight: 600;
	padding: 0.25rem 0.75rem;
	border-radius: 0.375rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	z-index: 1;
}

.dpfcrs-pricing-card-header {
	flex-direction: column;
	align-items: flex-start !important;
	justify-content: flex-start !important;
	padding-top: 1.25rem;
}

.dpfcrs-pricing-card-header-content {
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.75rem;
}

.dpfcrs-pricing-card-header .dpfcrs-card-title {
	margin: 0 !important;
	width: 100%;
}

.dpfcrs-pricing-amount {
	display: flex;
	align-items: baseline;
	gap: 0.25rem;
	margin-top: 0;
	width: 100%;
}

.dpfcrs-pricing-currency {
	font-size: 1.25rem;
	font-weight: 600;
	color: var(--color-text-main-light);
}

.dpfcrs-pricing-price {
	font-size: 2.25rem;
	font-weight: 700;
	color: var(--color-text-main-light);
	line-height: 1;
}

.dpfcrs-pricing-period {
	font-size: 1rem;
	font-weight: 400;
	color: var(--color-text-sub-light);
}

.dpfcrs-pricing-features {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 0.625rem;
	width: 100%;
	flex: 1;
}

.dpfcrs-pricing-feature {
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
	width: 100%;
}

.dpfcrs-pricing-feature-icon {
	flex-shrink: 0;
	color: var(--color-success);
	width: 1.25rem;
	height: 1.25rem;
	margin-top: 0.125rem;
}

.dpfcrs-pricing-feature span {
	font-size: 0.875rem;
	color: var(--color-text-main-light);
	line-height: 1.5;
	flex: 1;
}

/* ── Horizontal pricing card layout ──────────────────────────── */
.dpfcrs-pricing-card-horizontal {
	flex-direction: row;
	align-items: stretch;
}

.dpfcrs-pricing-card-left {
	width: 38%;
	min-width: 240px;
	padding: 0.875rem 1rem;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	border-right: 1px solid var(--color-border-light);
	flex-shrink: 0;
}

.dpfcrs-pricing-card-right {
	flex: 1;
	padding: 0.875rem 1rem;
	display: flex;
	align-items: center;
	min-width: 0;
}

.dpfcrs-pricing-features-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 0.375rem 1.25rem;
	flex-direction: unset;
	align-content: start;
	width: 100%;
}

@media (max-width: 768px) {
	.dpfcrs-pricing-card-horizontal {
		flex-direction: column;
	}
	.dpfcrs-pricing-card-left {
		width: 100%;
		min-width: unset;
		border-right: none;
		border-bottom: 1px solid var(--color-border-light);
	}
	.dpfcrs-pricing-features-grid {
		grid-template-columns: 1fr;
	}
}

.dpfcrs-faq-item {
	padding-bottom: 1.5rem;
	border-bottom: 1px solid var(--color-border-light);
}

.dpfcrs-faq-item:last-child {
	border-bottom: none;
	padding-bottom: 0;
}

.dpfcrs-faq-question {
	font-size: 1rem;
	font-weight: 600;
	color: var(--color-text-main-light);
	margin: 0 0 0.5rem 0;
}

.dpfcrs-faq-answer {
	font-size: 0.875rem;
	line-height: 1.6;
	margin: 0;
}

/* ===== TOOLTIP ===== */
.dpfcrs-tooltip-wrapper {
	position: relative;
	display: inline-block;
}

.dpfcrs-tooltip-wrapper button:disabled {
	pointer-events: none;
}

.dpfcrs-tooltip {
	visibility: hidden;
	opacity: 0;
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX(-50%);
	margin-top: 0.5rem;
	background-color: #1f2937;
	color: #ffffff;
	text-align: center;
	padding: 0.5rem 0.75rem;
	border-radius: 0.375rem;
	font-size: 0.75rem;
	white-space: nowrap;
	z-index: 1000;
	pointer-events: none;
	transition: opacity 0.2s, visibility 0.2s;
	box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.dpfcrs-tooltip::before {
	content: '';
	position: absolute;
	bottom: 100%;
	left: 50%;
	transform: translateX(-50%);
	border: 5px solid transparent;
	border-bottom-color: #1f2937;
}

.dpfcrs-tooltip-wrapper:hover .dpfcrs-tooltip {
	visibility: visible;
	opacity: 1;
}

/* Tab Navigation Styles */
.dpfcrs-tabs-wrapper {
	border-bottom: 1px solid #e5e7eb;
	margin-bottom: 1.5rem;
}

.dpfcrs-tabs-nav {
	display: flex;
	gap: 0;
}

.dpfcrs-tab-button {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.875rem 1.5rem;
	background: transparent;
	border: none;
	border-bottom: 2px solid transparent;
	color: #6b7280;
	font-size: 0.875rem;
	font-weight: 500;
	cursor: pointer;
	transition: color 0.2s ease;
	position: relative;
	margin-bottom: -1px;
}

.dpfcrs-tab-button:hover {
	color: #374151;
}

.dpfcrs-tab-button.dpfcrs-tab-active {
	color: #2563eb;
	border-bottom-color: #2563eb;
	font-weight: 600;
}

.dpfcrs-tab-icon {
	width: 18px;
	height: 18px;
	flex-shrink: 0;
	color: inherit;
}

/* Responsive tab styles */
@media (max-width: 768px) {
	.dpfcrs-tab-button {
		padding: 0.75rem 1rem;
		font-size: 0.8125rem;
		gap: 0.375rem;
	}
	
	.dpfcrs-tab-icon {
		width: 16px;
		height: 16px;
	}
}

.dpfcrs-tab-content {
	display: none;
}

.dpfcrs-tab-content.dpfcrs-tab-content-active {
	display: block;
}

/* Code Block Styles */
.dpfcrs-code-block {
	position: relative;
	background: #1f2937;
	border: 1px solid #374151;
	border-radius: 8px;
	padding: 14px 50px 14px 16px;
	margin: 8px 0;
	overflow: hidden;
}

.dpfcrs-code {
	font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'source-code-pro', monospace;
	font-size: 12px;
	color: #e5e7eb;
	word-break: break-all;
	display: block;
	line-height: 1.6;
}

.dpfcrs-code-copy {
	position: absolute;
	top: 10px;
	right: 10px;
	background: rgba(255, 255, 255, 0.15);
	border: 1px solid rgba(255, 255, 255, 0.3);
	border-radius: 6px;
	padding: 10px;
	cursor: pointer;
	transition: all 0.2s ease;
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	min-height: 40px;
	backdrop-filter: blur(4px);
	z-index: 10;
}

.dpfcrs-code-copy:hover {
	background: rgba(255, 255, 255, 0.2);
	border-color: rgba(255, 255, 255, 0.4);
	transform: scale(1.05);
}

.dpfcrs-code-copy:active {
	transform: scale(0.95);
}

.dpfcrs-code-copy-icon {
	width: 20px;
	height: 20px;
	color: #ffffff !important;
	transition: color 0.2s ease;
}

.dpfcrs-code-copy-icon svg {
	width: 100%;
	height: 100%;
	stroke: currentColor;
	stroke-width: 2;
}

.dpfcrs-code-copy:hover .dpfcrs-code-copy-icon {
	color: #ffffff !important;
	opacity: 0.9;
}

/* Step Number Styles */
.dpfcrs-step-number {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: #2563eb;
	color: #ffffff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 14px;
	font-weight: 600;
	flex-shrink: 0;
}

/* How to Use Steps Layout */
.dpfcrs-how-to-use-steps {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
}

.dpfcrs-step-item {
	display: flex;
	align-items: flex-start;
	gap: 1rem;
}

.dpfcrs-step-item .dpfcrs-step-number {
	align-self: flex-start;
	margin-top: 0;
	flex-shrink: 0;
}

.dpfcrs-step-content {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
}

.dpfcrs-step-title {
	font-size: 0.875rem;
	font-weight: 600;
	color: #1f2937;
	margin: 0 0 0.5rem 0;
	line-height: 1.5;
	display: flex;
	align-items: center;
	min-height: 32px;
}

.dpfcrs-step-description {
	font-size: 0.75rem;
	color: #6b7280;
	margin: 0;
	line-height: 1.6;
}

/* Background Color Utilities */
.dpfcrs-bg-gray-50 {
	background-color: #f9fafb;
}

.dpfcrs-bg-blue-50 {
	background-color: #eff6ff;
}

.dpfcrs-text-blue-600 {
	color: #2563eb;
}

/* Embed Sections - Equal Width Layout */
.dpfcrs-embed-sections {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1.5rem;
}

.dpfcrs-embed-sections .dpfcrs-embed-section {
	flex: 1;
	min-width: 0;
}

@media (max-width: 1024px) {
	.dpfcrs-embed-sections {
		grid-template-columns: 1fr;
	}
}


/**
 * Docs Publisher for Confluence - Admin Styles
 * Custom CSS (No Tailwind)
 */

/* ===== FONT FACE DECLARATIONS ===== */
@font-face {
	font-family: 'Inter';
	src: url('fonts/Inter-Regular.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Inter';
	src: url('fonts/Inter-Medium.woff2') format('woff2');
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Inter';
	src: url('fonts/Inter-SemiBold.woff2') format('woff2');
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}

/* ===== CSS VARIABLES ===== */
:root {
	--color-primary: #2b6cee;
	--color-primary-hover: #1e5dd8;
	--color-primary-light: rgba(43, 108, 238, 0.1);
	--color-primary-border: rgba(43, 108, 238, 0.2);
	
	/* Light Theme Colors */
	--color-bg-light: #f6f6f8;
	--color-surface-light: #ffffff;
	--color-border-light: #e2e8f0;
	--color-text-main-light: #111318;
	--color-text-sub-light: #4b5563;
	
	/* Status Colors */
	--color-success: #10b981;
	--color-success-light: #d1fae5;
	--color-error: #ef4444;
	--color-error-light: #fee2e2;
	--color-warning: #f59e0b;
	--color-warning-light: #fef3c7;
}

/* ===== BASE STYLES ===== */
/**
 * Root container for all plugin UI components.
 * This wrapper ensures all plugin content (sidebar, header, content views, settings)
 * is contained within a single root element without interfering with WordPress
 * admin notices (displayed above) or the WordPress admin footer (displayed below).
 */
.dpfcrs-admin-wrapper {
	margin: 0;
	padding: 0;
	font-family: "Inter", sans-serif;
	min-height: calc(100vh - 32px - 36px);
	height: calc(100vh - 32px - 36px);
	width: 100%;
	background-color: var(--color-bg-light);
	color: var(--color-text-main-light);
	transition: background-color 0.2s, color 0.2s;
	-webkit-font-smoothing: antialiased;
	position: relative;
	z-index: 1;
	/* Ensure wrapper doesn't overlap WordPress admin notices or footer */
	overflow: hidden;
	border: 2px solid #e1e6ec;
	border-radius: 0.5rem;
	box-sizing: border-box;
	margin-top: 18px;
}

/* Hide WordPress admin sidebar on plugin pages */
.wp-admin.folded .dpfcrs-admin-wrapper ~ #wpcontent,
.wp-admin .dpfcrs-admin-wrapper ~ #wpcontent {
	margin-left: 0;
}

/* Remove WordPress admin padding when wrapper is present */
.wrap .dpfcrs-admin-wrapper,
#wpbody-content .dpfcrs-admin-wrapper {
	margin-left: -10px;
	margin-right: -10px;
	margin-top: calc(32px - 20px);
	margin-bottom: -20px;
	/* height: calc(100vh - 32px - 36px + 40px); */
	/* min-height: calc(100vh - 32px - 36px + 40px); */
}

/* Ensure WordPress sidebar stays below plugin sidebar */
#adminmenuback,
#adminmenuwrap,
#adminmenu {
	z-index: 9990;
}

.dpfcrs-admin-wrapper ~ .wrap h1,
.dpfcrs-admin-wrapper ~ .wrap .nav-tab-wrapper {
	display: none;
}

/* ===== LAYOUT ===== */
.dpfcrs-layout-flex {
	display: flex;
}

.dpfcrs-layout-flex-col {
	display: flex;
	flex-direction: column;
}

.dpfcrs-layout-flex-row {
	display: flex;
	flex-direction: row;
}

.dpfcrs-layout-min-h-screen {
	min-height: 100%;
	height: 100%;
	align-items: stretch;
}

.dpfcrs-layout-flex-1 {
	flex: 1;
}

.dpfcrs-layout-flex-wrap {
	flex-wrap: wrap;
}

/* ===== SIDEBAR ===== */
.dpfcrs-sidebar {
	width: 100%;
	background-color: #ffffff;
	border-right: 1px solid #e2e8f0;
	display: flex;
	flex-direction: column;
	transition: background-color 0.3s, border-color 0.3s;
	position: relative;
	min-height: 100%;
	height: 100%;
	z-index: 9991;
	overflow-x: hidden;
	overflow-y: auto;
	flex-shrink: 0;
	align-self: stretch;
}


.dpfcrs-sidebar-header {
	height: 4.5rem;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	padding: 0 .5rem;
	border-bottom: 1px solid #e2e8f0;
	flex-shrink: 0;
}


.dpfcrs-sidebar-logo {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	color: #111318;
	width: auto;
	margin-right: auto;
}


.dpfcrs-sidebar-logo img {
	height: 2.25rem;
	width: auto;
	object-fit: contain;
	flex-shrink: 0;
}

.dpfcrs-sidebar-logo-text {
	display: flex;
	flex-direction: column;
	gap: 0.0625rem;
	flex: 1;
	min-width: 0;
}

.dpfcrs-sidebar-logo-title {
	font-size: 1.1rem;
	font-weight: 700;
	line-height: 1.25rem;
	letter-spacing: -0.02em;
	margin: 0;
	color: #111318;
	white-space: normal;
	overflow: visible;
	word-wrap: break-word;
}


.dpfcrs-sidebar-logo-subtitle {
	font-size: 0.625rem;
	font-weight: 400;
	font-style: italic;
	line-height: 1rem;
	margin: 0;
	color: #6b7280;
}


.dpfcrs-sidebar-logo .dpfcrs-icon {
	color: var(--color-primary);
	width: 1.875rem;
	height: 1.875rem;
}

.dpfcrs-sidebar-logo span {
	font-size: 1.125rem;
	font-weight: 700;
	letter-spacing: -0.02em;
}

.dpfcrs-sidebar-nav {
	flex: 1;
	overflow-y: auto;
	overflow-x: hidden;
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	padding: 1rem 0.75rem;
	min-height: 0;
}

.dpfcrs-sidebar-nav-title {
	padding: 0.5rem 0.75rem;
	font-size: 0.75rem;
	font-weight: 600;
	color: #374151;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}


.dpfcrs-sidebar-nav-link {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.625rem 0.75rem;
	border-radius: 0.5rem;
	transition: all 0.2s;
	color: #374151;
	text-decoration: none;
	font-size: 0.8125rem;
}


.dpfcrs-sidebar-nav-link:hover {
	background-color: #f8fafc;
}

.dpfcrs-sidebar-nav-link:focus {
	outline: none !important;
	box-shadow: none !important;
}

.dpfcrs-sidebar-nav-link:active {
	outline: none !important;
	box-shadow: none !important;
}

.dpfcrs-sidebar-nav-link:focus-visible {
	outline: 2px solid var(--color-primary);
	outline-offset: 2px;
}

.dpfcrs-sidebar-nav-link.dpfcrs-nav-active {
	background-color: var(--color-primary-light);
	color: var(--color-primary);
	font-weight: 500;
}

.dpfcrs-sidebar-nav-link .dpfcrs-icon {
	width: 1.25rem;
	height: 1.25rem;
}

.dpfcrs-sidebar-nav-link.dpfcrs-nav-active .dpfcrs-icon {
	opacity: 1;
}

.dpfcrs-sidebar-nav-link:not(.dpfcrs-nav-active):hover .dpfcrs-icon {
	color: var(--color-primary);
}

.dpfcrs-sidebar-footer {
	padding: 1rem;
	flex-shrink: 0;
}


.dpfcrs-sidebar-user {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

.dpfcrs-sidebar-actions {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	margin-top: 1rem;
	padding-top: 1rem;
	border-top: 1px solid #e2e8f0;
}

.dpfcrs-sidebar-action-btn {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.625rem 0.75rem;
	border: none;
	background: none;
	color: #374151;
	font-size: 0.875rem;
	font-weight: 400;
	cursor: pointer;
	transition: all 0.2s;
	width: 100%;
	text-align: left;
	border-radius: 0.375rem;
}

.dpfcrs-sidebar-action-btn:hover {
	background-color: #f8fafc;
	color: var(--color-primary);
}

.dpfcrs-sidebar-action-btn:focus {
	outline: none !important;
	box-shadow: none !important;
}

.dpfcrs-sidebar-action-btn:active {
	outline: none !important;
	box-shadow: none !important;
}

.dpfcrs-sidebar-action-btn:focus-visible {
	outline: 2px solid var(--color-primary);
	outline-offset: 2px;
}

.dpfcrs-sidebar-action-btn .dpfcrs-icon {
	width: 1.125rem;
	height: 1.125rem;
	flex-shrink: 0;
}


/* ===== MAIN CONTENT ===== */
.dpfcrs-main-content {
	flex: 1;
	display: flex;
	flex-direction: column;
	min-height: 100%;
	height: 100%;
	align-self: stretch;
	margin-left: 0;
	width: 100%;
	transition: margin-left 0.2s;
}

/* ===== HEADER ===== */
.dpfcrs-header {
	height: 4.5rem;
	background-color: #ffffff;
	border-bottom: 1px solid #e2e8f0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 1.75rem;
	flex-shrink: 0;
	position: sticky;
	z-index: 9999;
}


.dpfcrs-header-left {
	display: flex;
	align-items: center;
	gap: 1rem;
}

.dpfcrs-header-menu-btn {
	color: #64748b;
	background: none;
	border: none;
	cursor: pointer;
	display: none;
}

.dpfcrs-header-menu-btn:hover {
	color: #475569;
}

.dpfcrs-header-title {
	color: #111318;
	font-size: 1.125rem;
	font-weight: 700;
	line-height: 1.75rem;
	letter-spacing: -0.02em;
	display: none;
}


.dpfcrs-header-right {
	display: flex;
	align-items: center;
	gap: 1.5rem;
}

.dpfcrs-header-help-btn {
	color: #64748b;
	background: none;
	border: none;
	cursor: pointer;
	transition: color 0.2s;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0.5rem;
	border-radius: 0.375rem;
	text-decoration: none;
}

.dpfcrs-header-help-btn:hover {
	color: var(--color-primary);
	background-color: rgba(43, 108, 238, 0.1);
}


.dpfcrs-header-divider {
	height: 2rem;
	width: 1px;
	background-color: #e2e8f0;
}


.dpfcrs-header-doc-link {
	font-size: 0.875rem;
	font-weight: 500;
	color: var(--color-primary);
	text-decoration: none;
	transition: color 0.2s;
}

.dpfcrs-header-doc-link:hover {
	color: var(--color-primary-hover);
}

/* ===== MAIN AREA ===== */
.dpfcrs-main-area {
	flex: 1;
	overflow-y: auto;
	overflow-x: hidden;
	padding: 1rem 1rem;
	scroll-behavior: smooth;
	height: calc(100vh - 32px - 4rem - 36px);
}

.dpfcrs-main-container {
	max-width: 1200px;
	margin: 0 auto;
	display: flex;
  width: 100%;
	flex-direction: column;
	gap: 2rem;
}

/* ===== PAGE HEADER ===== */
.dpfcrs-page-header {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: flex-end;
	gap: 1rem;
}

.dpfcrs-page-header-content {
	display: flex;
	min-width: 18rem;
	flex-direction: column;
	gap: 0.5rem;
}

.dpfcrs-page-title {
	font-size: 1.875rem;
	font-weight: 900;
	line-height: 1.2;
	letter-spacing: -0.033em;
}

.dpfcrs-page-description {
	color: var(--color-text-sub-light);
  font-size: 1rem;
	font-weight: 400;
	line-height: 1.5;
	max-width: 42rem;
}


.dpfcrs-page-header-actions {
	display: flex;
	gap: 0.75rem;
}

/* ===== BUTTONS ===== */
.dpfcrs-btn {
	display: flex;
	cursor: pointer;
	align-items: center;
	justify-content: center;
  overflow: hidden;
	border-radius: 0.5rem;
	height: 2.5rem;
	padding: 0 1rem;
	font-size: 0.875rem;
	font-weight: 700;
	transition: all 0.2s;
	border: none;
	text-decoration: none;
}

.dpfcrs-btn-primary {
	background-color: var(--color-primary);
	color: #ffffff;
	box-shadow: 0 4px 6px -1px rgba(43, 108, 238, 0.2);
}

.dpfcrs-btn-primary:hover {
	background-color: #1e5dd8;
}

.dpfcrs-btn-primary:active {
	transform: scale(0.95);
}

.dpfcrs-btn-secondary {
	background-color: var(--color-surface-light);
	border: 1px solid var(--color-border-light);
	color: var(--color-text-main-light);
}


.dpfcrs-btn-secondary:hover {
	background-color: #f8fafc;
}


.dpfcrs-btn-outline {
	background-color: rgba(43, 108, 238, 0.1);
	border: 1px solid rgba(43, 108, 238, 0.2);
	color: var(--color-primary);
}

.dpfcrs-btn-outline:hover {
	background-color: rgba(43, 108, 238, 0.2);
}

.dpfcrs-btn-icon {
	margin-right: 0.5rem;
	width: 1.25rem;
	height: 1.25rem;
	flex-shrink: 0;
}

.dpfcrs-btn:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

.dpfcrs-btn-lg {
	height: 3rem;
	padding: 0 1.5rem;
}

/* Remove Connection Icon Button */
.dpfcrs-remove-connection-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.75rem;
	height: 1.75rem;
	padding: 0;
	border: none;
	background: transparent;
	color: var(--color-text-sub-light);
	cursor: pointer;
	border-radius: 0.25rem;
	transition: all 0.2s ease;
	opacity: 0.6;
}

.dpfcrs-remove-connection-btn:hover {
	opacity: 1;
	background-color: rgba(239, 68, 68, 0.1);
	color: #ef4444;
}

.dpfcrs-remove-connection-btn:active {
	transform: scale(0.95);
}



/* ===== CARDS ===== */
.dpfcrs-card {
	background-color: var(--color-surface-light);
	border-radius: 0.75rem;
	box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
	border: 1px solid var(--color-border-light);
	overflow: hidden;
}


.dpfcrs-card-header {
	padding: 1.3rem 1.7rem;
	border-bottom: 1px solid var(--color-border-light);
	display: flex;
	justify-content: space-between;
	align-items: center;
}


.dpfcrs-card-title {
	font-size: 1.125rem;
	font-weight: 700;
	margin: 0 !important;
	margin-bottom: 0 !important;
	line-height: 1.2 !important;
}

.dpfcrs-card-header .dpfcrs-card-title {
	margin: 0 !important;
	margin-bottom: 0 !important;
	line-height: 1.2 !important;
}

.dpfcrs-card-description {
	color: var(--color-text-sub-light);
	font-size: 0.80rem;
	line-height: 1.5;
	margin: 0 !important;
	margin-top: 0.1875rem !important;
}

.dpfcrs-card-header .dpfcrs-card-description {
	margin: 0 !important;
	margin-top: 0.1875rem !important;
}

.dpfcrs-card-header .dpfcrs-flex-col {
	gap: 0.125rem!important;
}


.dpfcrs-card-body {
	padding: 1.5rem;
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
}

.dpfcrs-pricing-card .dpfcrs-card-body {
	padding: 1.25rem 1.5rem;
	flex: 1;
	display: flex;
	flex-direction: column;
}

/* ===== FORMS ===== */
.dpfcrs-form-fields-container {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.dpfcrs-form-group {
  display: flex;
	flex-direction: column;
}

.dpfcrs-form-label-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
}

.dpfcrs-form-label {
	font-size: 0.875rem;
	font-weight: 500;
	color: var(--color-text-main-light);
}


.dpfcrs-form-input-wrapper {
	position: relative;
}

.dpfcrs-form-input {
	width: 100%;
	border-radius: 0.5rem !important;
	border: 1px solid #cbd5e1!important;
	background-color: #ffffff!important;
	color: var(--color-text-main-light);
  height: 2.75rem;
	padding: 0 0.75rem;
	font-size: 0.875rem;
	transition: all 0.2s;
	box-sizing: border-box;
}

.dpfcrs-form-input::placeholder {
	color: var(--color-text-sub-light);
	opacity: 0.6;
}



.dpfcrs-form-input:focus {
	outline: none;
	ring: 2px;
	ring-color: var(--color-primary);
	border-color: var(--color-primary);
	box-shadow: 0 0 0 2px rgba(43, 108, 238, 0.2);
}

.dpfcrs-form-input-icon-left {
	padding-left: 2.5rem !important;
}

.dpfcrs-form-input-icon-right {
	padding-right: 2.5rem !important;
}

.dpfcrs-form-icon-left {
	position: absolute;
	left: 0.75rem;
	top: 50%;
	transform: translateY(-50%);
	color: var(--color-text-sub-light);
	display: flex;
	align-items: center;
	justify-content: center;
	pointer-events: none;
	z-index: 1;
	width: 1.25rem;
	height: 1.25rem;
	line-height: 0;
}


.dpfcrs-form-icon-left .dpfcrs-icon {
	width: 1.25rem;
	height: 1.25rem;
	flex-shrink: 0;
}

.dpfcrs-form-icon-left .dpfcrs-icon svg {
	width: 1.25rem;
	height: 1.25rem;
	display: block;
}

.dpfcrs-form-icon-right {
	position: absolute;
	right: 0.75rem;
	top: 50%;
	transform: translateY(-50%);
	color: var(--color-text-sub-light);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: color 0.2s;
	z-index: 1;
	background: none;
	border: none;
	padding: 0;
	width: 1.25rem;
	height: 1.25rem;
	line-height: 0;
}


.dpfcrs-form-icon-right:hover {
	color: var(--color-primary);
}

.dpfcrs-form-icon-right .dpfcrs-icon {
	width: 1.25rem;
	height: 1.25rem;
	flex-shrink: 0;
}

.dpfcrs-form-icon-right .dpfcrs-icon svg {
	width: 1.25rem;
	height: 1.25rem;
	display: block;
}

.dpfcrs-form-help-text {
	font-size: 0.75rem;
	color: var(--color-text-sub-light);
	margin-top: 0.125rem;
	margin-bottom: 0;
}


.dpfcrs-form-select {
	width: 100%;
	appearance: none;
	border-radius: 0.5rem!important;
	border: 1px solid #cbd5e1!important; 
	background-color: #ffffff!important;
	color: var(--color-text-main-light)!important;
	height: 2.75rem;
	padding: 0 2.5rem 0 0.75rem;
	font-size: 0.875rem;
	cursor: pointer;
	transition: all 0.2s;
}


.dpfcrs-form-select:focus {
	outline: none;
	border-color: var(--color-primary);
	box-shadow: 0 0 0 2px rgba(43, 108, 238, 0.2);
}

.dpfcrs-form-select-icon {
	position: absolute;
	right: 0.75rem;
	top: 50%;
	transform: translateY(-50%);
	pointer-events: none;
	color: var(--color-text-sub-light);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 1;
}

.dpfcrs-form-select-icon .dpfcrs-icon {
	width: 1.25rem;
	height: 1.25rem;
}

.dpfcrs-form-select-icon-left {
	padding-left: 2.5rem !important;
}

/* ===== GRID SYSTEM ===== */
.dpfcrs-grid {
	display: grid;
	gap: 1.5rem;
}

.dpfcrs-grid-cols-1 {
	grid-template-columns: repeat(1, minmax(0, 1fr));
}

.dpfcrs-grid-cols-2 {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.dpfcrs-grid-cols-3 {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.dpfcrs-grid-cols-12 {
	grid-template-columns: repeat(12, minmax(0, 1fr));
}

.dpfcrs-col-span-2 {
	grid-column: span 2 / span 2;
}

.dpfcrs-col-span-4 {
	grid-column: span 4 / span 4;
}

.dpfcrs-col-span-8 {
	grid-column: span 8 / span 8;
}

/* ===== STATUS BADGE ===== */
.dpfcrs-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	font-size: 0.75rem;
	font-weight: 500;
	padding: 0.4rem 1rem;
	border-radius: 8px;
}

.dpfcrs-badge-success {
	background-color: #d1fae5;
	color: #047857;
}


.dpfcrs-badge-pulse {
	width: 0.375rem;
	height: 0.375rem;
	border-radius: 9999px;
	background-color: #10b981;
	animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes pulse {
	0%, 100% {
		opacity: 1;
	}
  50% {
    opacity: .5;
  }
}

/* ===== TABLE ===== */
.dpfcrs-table-container {
	overflow-x: auto;
}

.dpfcrs-table {
	width: 100%;
	text-align: left;
	font-size: 0.875rem;
}

.dpfcrs-table thead {
	background-color: var(--color-bg-light);
	border-bottom: 1px solid var(--color-border-light);
	color: var(--color-text-sub-light);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	font-size: 0.75rem;
	font-weight: 600;
}


.dpfcrs-table th {
	padding: 1rem 1.5rem;
}

.dpfcrs-table tbody {
	divide-y: 1px solid var(--color-border-light);
}


.dpfcrs-table tbody tr {
	transition: background-color 0.2s;
	border-bottom: 1px solid var(--color-border-light);
}


.dpfcrs-table tbody tr:hover {
	background-color: var(--color-bg-light);
}


.dpfcrs-table td {
	padding: 1rem 1.5rem;
}

.dpfcrs-table-cell-flex {
	display: flex;
  align-items: center;
	gap: 0.75rem;
}

.dpfcrs-table-avatar {
	width: 2rem;
	height: 2rem;
	border-radius: 0.25rem;
	background-color: #dbeafe;
	display: flex;
	align-items: center;
  justify-content: center;
	color: var(--color-primary);
	font-weight: 700;
}


.dpfcrs-table-text-main {
	font-weight: 500;
	color: var(--color-text-main-light);
}


.dpfcrs-table-text-sub {
	color: var(--color-text-sub-light);
	font-family: monospace;
	font-size: 0.75rem;
}


.dpfcrs-table-status {
	display: flex;
	align-items: center;
	gap: 0.375rem;
}

.dpfcrs-table-status-dot {
	width: 0.375rem;
	height: 0.375rem;
	border-radius: 9999px;
	background-color: #10b981;
}

.dpfcrs-table-text-center {
	text-align: center;
}

.dpfcrs-table-text-right {
	text-align: right;
}

/* ===== MINIMAL MODERN TABLE DESIGN ===== */
.dpfcrs-table-modern {
	border-radius: 0.5rem;
	overflow: hidden;
	background: var(--color-surface-light);
	border: 1px solid var(--color-border-light);
}

.dpfcrs-table-spaces {
	border-collapse: separate;
	border-spacing: 0;
	width: 100%;
}

.dpfcrs-table-spaces thead {
	background: var(--color-bg-light);
	border-bottom: 1px solid var(--color-border-light);
}

.dpfcrs-table-spaces thead th {
	padding: 1rem 1.5rem;
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--color-text-sub-light);
}

.dpfcrs-table-spaces tbody tr {
	border-bottom: 1px solid var(--color-border-light);
}

.dpfcrs-table-spaces tbody tr:last-child {
	border-bottom: none;
}

.dpfcrs-table-spaces tbody td {
	padding: 1rem 1.5rem;
	vertical-align: middle;
}

.dpfcrs-table-col-space {
	width: 50%;
}

.dpfcrs-table-col-key {
	width: 30%;
}

.dpfcrs-table-col-sync {
	width: 20%;
	text-align: center;
}

.dpfcrs-table-cell-content {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

.dpfcrs-table-avatar-modern {
	width: 2.25rem;
	height: 2.25rem;
	border-radius: 0.375rem;
	background: var(--color-primary);
	display: flex;
	align-items: center;
	justify-content: center;
	color: #ffffff;
	font-weight: 600;
	font-size: 0.875rem;
	flex-shrink: 0;
}

.dpfcrs-table-cell-text {
	flex: 1;
	min-width: 0;
}

.dpfcrs-table-spaces .dpfcrs-table-text-main {
	font-size: 0.9375rem;
	font-weight: 500;
	color: var(--color-text-main-light);
	line-height: 1.5;
	display: block;
}

.dpfcrs-table-key-badge {
	display: inline-block;
	font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', monospace;
	font-size: 0.8125rem;
	color: var(--color-text-sub-light);
	background: transparent;
	padding: 0;
	font-weight: 500;
	letter-spacing: 0.025em;
}

.dpfcrs-table-cell-sync {
	text-align: center;
}

.dpfcrs-table-cell-sync .dpfcrs-toggle-wrapper {
	display: inline-flex;
	justify-content: center;
}

@media (max-width: 768px) {
	.dpfcrs-table-spaces thead th,
	.dpfcrs-table-spaces tbody td {
		padding: 0.875rem 1rem;
	}
	
	.dpfcrs-table-avatar-modern {
		width: 2rem;
		height: 2rem;
		font-size: 0.8125rem;
	}
	
	.dpfcrs-table-cell-content {
		gap: 0.625rem;
	}
}

/* ===== TOGGLE SWITCH ===== */
.dpfcrs-toggle-wrapper {
	position: relative;
	display: inline-flex;
	align-items: center;
	cursor: pointer;
}

.dpfcrs-toggle-input {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
  overflow: hidden;
	clip: rect(0, 0, 0, 0);
  white-space: nowrap;
	border-width: 0;
}

.dpfcrs-toggle {
	width: 2.75rem;
	height: 1.5rem;
	background-color: #d1d5db;
  border-radius: 9999px;
	position: relative;
	transition: background-color 0.2s;
}


.dpfcrs-toggle:after {
	content: '';
	position: absolute;
	top: 0.125rem;
	left: 0.125rem;
	background-color: #ffffff;
	border: 1px solid #d1d5db;
	border-radius: 9999px;
	height: 1.25rem;
	width: 1.25rem;
	transition: transform 0.2s;
}


.dpfcrs-toggle-input:checked + .dpfcrs-toggle {
	background-color: var(--color-primary);
}

.dpfcrs-toggle-input:checked + .dpfcrs-toggle:after {
	transform: translateX(1.25rem);
	border-color: #ffffff;
}

.dpfcrs-toggle-input:focus + .dpfcrs-toggle {
	outline: none;
	box-shadow: 0 0 0 2px rgba(43, 108, 238, 0.5);
}


/* ===== FILTER & SEARCH ===== */
.dpfcrs-filter-group {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0 0.25rem;
}

.dpfcrs-filter-title {
	font-size: 1.25rem;
	font-weight: 700;
	color: var(--color-text-main-light);
}


.dpfcrs-filter-actions {
	display: flex;
	gap: 0.5rem;
}

.dpfcrs-filter-input {
	height: 2.25rem;
	width: 16rem;
	border-radius: 0.5rem!important;
	border: 1px solid #cbd5e1!important;;
	background-color: var(--color-surface-light);
	padding-left: 2.25rem;
	padding-right: 0.75rem;
	font-size: 0.875rem;
}


.dpfcrs-filter-input:focus {
	outline: none;
	box-shadow: 0 0 0 1px var(--color-primary);
}

.dpfcrs-filter-btn {
	height: 2.25rem;
	padding: 0 0.75rem;
	border-radius: 0.5rem;
	border: 1px solid var(--color-border-light);
	background-color: var(--color-surface-light);
	display: flex;
	align-items: center;
	color: var(--color-text-sub-light);
	transition: all 0.2s;
	font-size: 0.75rem;
	font-weight: 500;
	cursor: pointer;
}


.dpfcrs-filter-btn:hover {
	background-color: var(--color-bg-light);
}


/* ===== TOAST NOTIFICATIONS ===== */
#dpfcrs-toast-container {
	position: fixed;
	top: calc(32px + 4.5rem + 2rem);
	right: 2rem;
	z-index: 10000;
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	pointer-events: none;
	max-width: 28rem;
}

.dpfcrs-toast {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.75rem 1.25rem;
	border-radius: 0.5rem;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
	border: none;
	background: #1e293b;
	color: #f1f5f9;
	font-size: 0.875rem;
	font-weight: 500;
	max-width: 28rem;
	pointer-events: auto;
	animation: slideInRight 0.3s ease-out;
}

@keyframes slideInRight {
	from {
		transform: translateX(100%);
		opacity: 0;
	}
	to {
		transform: translateX(0);
		opacity: 1;
	}
}

.dpfcrs-toast-success {
	background: #1e293b;
	color: #f1f5f9;
}

.dpfcrs-toast-error {
	background: #1e293b;
	color: #f1f5f9;
}

.dpfcrs-toast-info {
	background: #1e293b;
	color: #f1f5f9;
}

.dpfcrs-toast-icon {
	width: 1.25rem;
	height: 1.25rem;
	flex-shrink: 0;
}

.dpfcrs-toast-icon.dpfcrs-toast-icon-success {
	color: #4ade80;
}

.dpfcrs-toast-icon.dpfcrs-toast-icon-error {
	color: #f87171;
}

.dpfcrs-toast-icon.dpfcrs-toast-icon-info {
	color: #60a5fa;
}


.dpfcrs-toast-message {
	flex: 1;
	font-size: 0.875rem;
	font-weight: 500;
}

.dpfcrs-toast-close {
	background: none;
	border: none;
	cursor: pointer;
	opacity: 0.5;
	transition: opacity 0.2s;
	color: #f1f5f9;
	padding: 0;
	display: flex;
	align-items: center;
	margin-left: 0.25rem;
}

.dpfcrs-toast-close:hover {
	opacity: 1;
}

/* ===== ALERT/INFO BOX ===== */
.dpfcrs-alert {
	padding: 1rem 1.25rem;
	border-radius: 0.5rem;
	border: 1px solid;
	border-left-width: 4px;
	display: flex;
	align-items: flex-start;
	gap: 0.875rem;
	background-color: #ffffff;
}

.dpfcrs-alert-success {
	background-color: #f0fdf4;
	border-color: #bbf7d0;
	border-left-color: #16a34a;
}

.dpfcrs-alert-warning {
	background-color: #fffbeb;
	border-color: #fde68a;
	border-left-color: #f59e0b;
}

.dpfcrs-alert-info {
	background-color: #eff6ff;
	border-color: #bfdbfe;
	border-left-color: #3b82f6;
}

.dpfcrs-alert-icon-wrapper {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	margin-top: 0.1rem;
}

.dpfcrs-alert-icon {
	color: #16a34a;
	width: 1.25rem;
	height: 1.25rem;
	flex-shrink: 0;
}

.dpfcrs-alert-warning .dpfcrs-alert-icon {
	color: #f59e0b;
}

.dpfcrs-alert-info .dpfcrs-alert-icon {
	color: #3b82f6;
}

.dpfcrs-alert-content {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	min-width: 0;
}

.dpfcrs-alert-title {
	color: #14532d;
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1.4;
	margin: 0 !important;
	padding: 0 !important;
}

.dpfcrs-alert-warning .dpfcrs-alert-title {
	color: #92400e;
}

.dpfcrs-alert-info .dpfcrs-alert-title {
	color: #1e40af;
}

.dpfcrs-alert-text {
	color: #166534;
	font-size: 0.875rem;
	line-height: 1.5;
	margin: 0 !important;
	padding: 0 !important;
}

.dpfcrs-alert-warning .dpfcrs-alert-text {
	color: #78350f;
}

.dpfcrs-alert-info .dpfcrs-alert-text {
	color: #1d4ed8;
}


/* ===== RADIO CARD ===== */
.dpfcrs-radio-card-wrapper {
	position: relative;
	display: flex;
	cursor: pointer;
}

.dpfcrs-radio-card-input {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border-width: 0;
}

.dpfcrs-radio-card {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 0.5rem;
	border-radius: 0.5rem;
	border: 2px solid var(--color-border-light);
	background-color: var(--color-surface-light);
	padding: 0.875rem;
	transition: all 0.2s;
}


.dpfcrs-radio-card-wrapper:hover .dpfcrs-radio-card {
	border-color: #cbd5e1;
}


.dpfcrs-radio-card-input:checked + .dpfcrs-radio-card {
	border-color: var(--color-primary);
	box-shadow: 0 0 0 1px var(--color-primary);
	background-color: rgba(43, 108, 238, 0.05);
}


.dpfcrs-radio-card-header {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	position: relative;
}

.dpfcrs-radio-card-icon {
	color: var(--color-text-main-light);
	width: 1.5rem;
	height: 1.5rem;
	flex-shrink: 0;
}


.dpfcrs-radio-card-indicator {
	height: 1rem;
	width: 1rem;
	border-radius: 9999px;
	border: 1px solid var(--color-border-light);
}

.dpfcrs-radio-card-input:checked + .dpfcrs-radio-card .dpfcrs-radio-card-indicator {
	border-color: var(--color-primary);
	background-color: var(--color-primary);
}

.dpfcrs-radio-card-content {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
}

.dpfcrs-radio-card-title {
	color: var(--color-text-main-light);
  font-size: 1rem;
  font-weight: 700;
}


.dpfcrs-radio-card-description {
	color: var(--color-text-sub-light);
	font-size: 0.875rem;
  line-height: 1.5;
}


/* ===== CHECKBOX ===== */
.dpfcrs-checkbox {
	border-radius: 0.25rem;
	border: 1px solid #d1d5db;
	color: var(--color-primary);
	height: 1rem;
	width: 1rem;
	cursor: pointer;
}

.dpfcrs-checkbox:focus {
	box-shadow: 0 0 0 2px rgba(43, 108, 238, 0.2);
}

/* ===== PAGE TREE ===== */
#dpfcrs-pages-tree {
	font-family: "Inter", sans-serif;
	max-height: 37.5rem;
	overflow-y: auto;
	border: 1px solid var(--color-border-light);
	border-radius: 0.5rem;
	padding: 1rem;
	background-color: #fcfcfd;
}


.page-item {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.5rem;
	border-radius: 0.25rem;
	transition: background-color 0.15s;
}

.page-item:hover {
	background-color: rgba(43, 108, 238, 0.05);
}

/* Page ID Container */
.dpfcrs-page-id-container {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	padding: 0.25rem 0.5rem;
	background-color: #f1f5f9;
	border-radius: 0.375rem;
	border: 1px solid #e2e8f0;
}

.dpfcrs-page-id-text {
	color: #475569;
	font-size: 0.75rem;
	line-height: 1.25rem;
}

.dpfcrs-page-id-copy {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.125rem;
	background: transparent;
	border: none;
	border-radius: 0.25rem;
	cursor: pointer;
	color: #64748b;
	transition: all 0.15s ease;
	line-height: 1;
}

.dpfcrs-page-id-copy:hover {
	color: #2b6cef;
	background-color: rgba(43, 108, 238, 0.1);
}

.dpfcrs-page-id-copy:active {
	transform: scale(0.95);
}

/* Last Sync Time */
.dpfcrs-last-sync-time {
	color: #64748b;
	font-size: 0.75rem;
	line-height: 1.25rem;
	padding: 0.25rem 0.5rem;
	background-color: #f8fafc;
	border-radius: 0.375rem;
	border: 1px solid #e2e8f0;
	white-space: nowrap;
}

.dpfcrs-page-id-copy .dpfcrs-icon {
	width: 14px;
	height: 14px;
}


.dpfcrs-page-checkbox:checked + .dpfcrs-icon {
	color: var(--color-primary);
}

.dpfcrs-page-checkbox:checked ~ span {
	color: var(--color-primary);
	font-weight: 500;
}

/* ===== LOADING SPINNER ===== */
.dpfcrs-loading {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.75rem;
	padding: 3rem 0;
}

.dpfcrs-loading-icon {
	color: var(--color-primary);
	width: 2.25rem;
	height: 2.25rem;
	flex-shrink: 0;
	animation: spin 1s linear infinite;
}

@keyframes spin {
	from {
		transform: rotate(0deg);
	}
	to {
		transform: rotate(360deg);
	}
}

.dpfcrs-loading-text {
	color: var(--color-text-sub-light);
	font-size: 0.875rem;
}


/* ===== SVG ICONS ===== */
.dpfcrs-icon {
	display: inline-block;
	vertical-align: middle;
	flex-shrink: 0;
}

.dpfcrs-icon svg {
	width: 100%;
	height: 100%;
	display: block;
}

/* ===== SCROLLBAR ===== */
.dpfcrs-admin-wrapper ::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.dpfcrs-admin-wrapper ::-webkit-scrollbar-track {
  background: transparent;
}

.dpfcrs-admin-wrapper ::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 4px;
}


/* ===== UTILITY CLASSES ===== */
.dpfcrs-hidden {
  display: none;
}

.dpfcrs-flex {
	display: flex;
}

.dpfcrs-flex-col {
	flex-direction: column;
}

.dpfcrs-items-center {
	align-items: center;
}

.dpfcrs-justify-between {
	justify-content: space-between;
}

.dpfcrs-justify-end {
	justify-content: flex-end;
}

.dpfcrs-gap-1 {
	gap: 0.25rem;
}

.dpfcrs-gap-2 {
	gap: 0.5rem;
}

.dpfcrs-gap-3 {
	gap: 0.75rem;
}

.dpfcrs-gap-4 {
	gap: 1rem;
}

.dpfcrs-gap-5 {
	gap: 1.25rem;
}

.dpfcrs-gap-6 {
	gap: 1.5rem;
}

.dpfcrs-gap-8 {
	gap: 2rem;
}

.dpfcrs-gap-10 {
	gap: 2.5rem;
}

.dpfcrs-mb-1 {
	margin-bottom: 0.25rem;
}

.dpfcrs-mb-2 {
	margin-bottom: 0.5rem;
}

.dpfcrs-mb-4 {
	margin-bottom: 1rem;
}

.dpfcrs-mb-6 {
	margin-bottom: 1.5rem;
}

.dpfcrs-mt-2 {
	margin-top: 0.5rem;
}

.dpfcrs-mt-6 {
	margin-top: 1.5rem;
}

.dpfcrs-pt-2 {
	padding-top: 0.5rem;
}

.dpfcrs-pt-4 {
	padding-top: 1rem;
}

.dpfcrs-pt-6 {
	padding-top: 1.5rem;
}

.dpfcrs-pb-8 {
	padding-bottom: 2rem;
}

.dpfcrs-px-4 {
	padding-left: 1rem;
	padding-right: 1rem;
}

.dpfcrs-px-5 {
	padding-left: 1.25rem;
	padding-right: 1.25rem;
}

.dpfcrs-px-6 {
	padding-left: 1.5rem;
	padding-right: 1.5rem;
}

.dpfcrs-py-8 {
	padding-top: 2rem;
	padding-bottom: 2rem;
}

.dpfcrs-py-12 {
	padding-top: 3rem;
	padding-bottom: 3rem;
}

.dpfcrs-p-4 {
	padding: 1rem;
}

.dpfcrs-p-5 {
	padding: 1.25rem;
}

.dpfcrs-p-6 {
	padding: 1.5rem;
}

.dpfcrs-p-8 {
	padding: 2rem;
}

.dpfcrs-w-full {
	width: 100%;
}

.dpfcrs-max-w-2xl {
	max-width: 42rem;
}

.dpfcrs-max-w-xl {
	max-width: 36rem;
}

.dpfcrs-text-center {
	text-align: center;
}

.dpfcrs-text-xs {
	font-size: 0.75rem;
}

.dpfcrs-text-sm {
	font-size: 0.875rem;
}

.dpfcrs-text-base {
	font-size: 1rem;
}

.dpfcrs-text-lg {
	font-size: 1.125rem;
}

.dpfcrs-text-xl {
	font-size: 1.25rem;
}

.dpfcrs-text-2xl {
	font-size: 1.5rem;
}

.dpfcrs-text-3xl {
	font-size: 1.875rem;
}

.dpfcrs-font-medium {
	font-weight: 500;
}

.dpfcrs-font-semibold {
	font-weight: 600;
}

.dpfcrs-font-bold {
	font-weight: 700;
}

.dpfcrs-leading-tight {
	line-height: 1.25;
}

.dpfcrs-tracking-tight {
	letter-spacing: -0.025em;
}

.dpfcrs-border-t {
	border-top: 1px solid var(--color-border-light);
}


.dpfcrs-rounded-lg {
	border-radius: 0.5rem;
}

.dpfcrs-rounded-xl {
	border-radius: 0.75rem;
}

.dpfcrs-rounded-full {
	border-radius: 9999px;
}

.dpfcrs-animate-spin {
	animation: spin 1s linear infinite;
}

.animate-spin-slow {
	animation: spin 3s linear infinite;
}

.animate-slide-in {
	animation: slideInRight 0.3s ease-out;
}

/* ===== RESPONSIVE DESIGN ===== */
@media (min-width: 640px) {
	.sm\:dpfcrs-grid-cols-3 {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
	
	.sm\:dpfcrs-flex-row {
		flex-direction: row;
	}
	
	.sm\:dpfcrs-items-center {
		align-items: center;
	}
	
	.sm\:dpfcrs-block {
		display: block;
	}
}

@media (min-width: 768px) {
	.dpfcrs-sidebar {
		width: 13rem;
	}
	
	.dpfcrs-main-content {
		margin-left: 0;
	}
	
	.md\:dpfcrs-flex-row {
		flex-direction: row;
	}
	
	.md\:dpfcrs-grid-cols-2 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	
	.md\:dpfcrs-grid-cols-3 {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
	
	.md\:dpfcrs-p-8 {
		padding: 2rem;
	}
	
	.md\:dpfcrs-px-12 {
		padding-left: 3rem;
		padding-right: 3rem;
	}
	
	.md\:dpfcrs-py-12 {
		padding-top: 3rem;
		padding-bottom: 3rem;
	}
	
	.md\:dpfcrs-hidden {
		display: none;
	}
	
	.md\:dpfcrs-items-end {
		align-items: flex-end;
	}
	
	.md\:dpfcrs-w-auto {
		width: auto;
	}
	
	.dpfcrs-header-title {
		display: block;
	}
	
	.dpfcrs-header-menu-btn {
		display: none;
	}
	
}

@media (min-width: 1024px) {
	.lg\:dpfcrs-grid-cols-3 {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
	
	.lg\:dpfcrs-grid-cols-12 {
		grid-template-columns: repeat(12, minmax(0, 1fr));
	}
	
	.lg\:dpfcrs-col-span-1 {
		grid-column: span 1 / span 1;
	}
	
	.lg\:dpfcrs-col-span-2 {
		grid-column: span 2 / span 2;
	}
	
	.lg\:dpfcrs-col-span-4 {
		grid-column: span 4 / span 4;
	}
	
	.lg\:dpfcrs-col-span-8 {
		grid-column: span 8 / span 8;
	}
	
	.lg\:dpfcrs-order-1 {
		order: 1;
	}
	
	.lg\:dpfcrs-order-2 {
		order: 2;
	}
}

/* ===== ADDITIONAL HELPER CLASSES ===== */
.dpfcrs-min-w-72 {
	min-width: 18rem;
}

.dpfcrs-min-w-200 {
	min-width: 200px;
}

.dpfcrs-h-9 {
	height: 2.25rem;
}

.dpfcrs-h-10 {
	height: 2.5rem;
}

.dpfcrs-h-11 {
	height: 2.75rem;
}

.dpfcrs-h-12 {
	height: 3rem;
}

.dpfcrs-w-64 {
	width: 16rem;
}

.dpfcrs-opacity-0 {
	opacity: 0;
}

.dpfcrs-opacity-100 {
	opacity: 1;
}

.dpfcrs-transition-opacity {
	transition: opacity 0.2s;
}

.dpfcrs-absolute {
	position: absolute;
}

.dpfcrs-relative {
	position: relative;
}

.dpfcrs-top-3 {
	top: 0.75rem;
}

.dpfcrs-right-3 {
	right: 0.75rem;
}

.dpfcrs-flex-1 {
	flex: 1;
}

.dpfcrs-overflow-hidden {
	overflow: hidden;
}

.dpfcrs-shadow-sm {
	box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

.dpfcrs-shadow-md {
	box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.dpfcrs-cursor-pointer {
	cursor: pointer;
}

/* Badge variant for small tag */
.dpfcrs-tag {
	display: inline-flex;
	align-items: center;
	font-size: 0.75rem;
	font-weight: 700;
	padding: 0.125rem 0.5rem;
	border-radius: 0.25rem;
	background-color: rgba(43, 108, 238, 0.1);
	color: var(--color-primary);
}

.dpfcrs-tag-small {
	font-size: 0.75rem;
	background-color: #f1f5f9;
	color: #64748b;
	padding: 0.125rem 0.375rem;
	margin-left: auto;
}

/* Premium Badge */
.dpfcrs-premium-badge {
	display: inline-flex;
	align-items: center;
	font-size: 0.625rem;
	font-weight: 700;
	padding: 0.25rem 0.5rem;
	border-radius: 0.25rem;
	background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
	color: #ffffff;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1);
	position: absolute;
	top: -0.5rem;
	right: -0.5rem;
	z-index: 10;
}

.dpfcrs-radio-card-header .dpfcrs-premium-badge {
	position: absolute;
	top: -0.5rem;
	right: -0.5rem;
}

.dpfcrs-text-sm.dpfcrs-font-semibold .dpfcrs-premium-badge {
	position: static;
	margin-left: 0.5rem;
}

/* Premium Notice */
.dpfcrs-premium-notice {
	background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
	border: 1px solid #fde68a;
	border-radius: 0.75rem;
	padding: 1.125rem 1.375rem;
	box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.04);
}

.dpfcrs-premium-notice-content {
	display: flex;
	align-items: center;
	gap: 1rem;
	flex-wrap: wrap;
}

.dpfcrs-premium-notice-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	height: 2.25rem;
	background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
	border-radius: 0.5rem;
	flex-shrink: 0;
	color: #ffffff;
	opacity: 0.9;
}

.dpfcrs-premium-notice-icon .dpfcrs-icon {
	width: 1.375rem;
	height: 1.375rem;
}

.dpfcrs-premium-notice-text {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	min-width: 200px;
}

.dpfcrs-premium-notice-text strong {
	font-size: 0.875rem;
	font-weight: 600;
	color: #92400e;
	line-height: 1.4;
}

.dpfcrs-premium-notice-text span {
	font-size: 0.8125rem;
	color: #a16207;
	line-height: 1.5;
}

.dpfcrs-premium-notice-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.5625rem 1.125rem;
	background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
	color: #ffffff;
	font-size: 0.8125rem;
	font-weight: 500;
	border-radius: 0.5rem;
	text-decoration: none;
	transition: all 0.2s;
	box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.08);
	white-space: nowrap;
	opacity: 0.95;
}

.dpfcrs-premium-notice-button:hover {
	background: linear-gradient(135deg, #d97706 0%, #b45309 100%);
	box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.12);
	opacity: 1;
	color: #ffffff;
	text-decoration: none;
	transform: translateY(-0.5px);
}

@media (max-width: 768px) {
	.dpfcrs-premium-notice-content {
		flex-direction: column;
		align-items: stretch;
	}
	
	.dpfcrs-premium-notice-icon {
		align-self: flex-start;
	}
	
	.dpfcrs-premium-notice-button {
		width: 100%;
		justify-content: center;
	}
}


/* Order utilities for responsive layouts */
.dpfcrs-order-1 {
	order: 1;
}

.dpfcrs-order-2 {
	order: 2;
}

/* Space badge in page tree */
.dpfcrs-space-badge {
	font-size: 0.75rem;
	padding: 0.125rem 0.5rem;
	border-radius: 0.25rem;
	background-color: rgba(43, 108, 238, 0.1);
	color: var(--color-primary);
	font-weight: 500;
}


/* Text color utilities */
.dpfcrs-text-primary {
	color: var(--color-primary);
}

.dpfcrs-text-main {
	color: var(--color-text-main-light);
}


.dpfcrs-text-sub {
	color: var(--color-text-sub-light);
}


/* Link styling */
.dpfcrs-link {
	color: var(--color-primary);
	text-decoration: underline;
	font-weight: 500;
}

.dpfcrs-link:hover {
	text-decoration: none;
}

.dpfcrs-text-link {
	color: var(--color-primary);
	font-weight: 500;
	cursor: pointer;
	background: none;
	border: none;
	padding: 0;
	margin: 0;
	text-decoration: none;
	transition: all 0.2s;
	font-family: inherit;
	font-size: inherit;
	line-height: inherit;
}

button.dpfcrs-text-link {
	display: inline;
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	outline: none;
}

.dpfcrs-text-link:hover {
	text-decoration: underline;
	color: #1e5dd8;
}

.dpfcrs-text-link:active {
	opacity: 0.8;
}

.dpfcrs-text-link:focus {
	outline: none;
}

.dpfcrs-text-link:focus-visible {
	outline: 2px solid var(--color-primary);
	outline-offset: 2px;
	border-radius: 0.25rem;
}

/* Divider */
.dpfcrs-divider {
	border-top: 1px solid var(--color-border-light);
	margin: 1rem 0;
}


/* Selected count styling */
#dpfcrs-selected-count {
	font-size: 0.875rem;
	color: var(--color-text-sub-light);
}


/* Error message box */
#dpfcrs-pages-error {
	padding: 1rem;
	background-color: #fef2f2;
	border: 1px solid #fecaca;
	border-radius: 0.5rem;
}


#dpfcrs-pages-error p {
	color: #991b1b;
	font-size: 0.875rem;
}

/* ===== MODAL STYLES ===== */
.dpfcrs-modal {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 100000;
	align-items: center;
	justify-content: center;
	opacity: 0;
	transition: opacity 0.2s ease-in-out;
}

.dpfcrs-modal[aria-hidden="false"] {
	display: flex;
	opacity: 1;
}

.dpfcrs-modal-overlay {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(0, 0, 0, 0.5);
	backdrop-filter: blur(2px);
}

.dpfcrs-modal-content {
	position: relative;
	background-color: #ffffff;
	border-radius: 0.75rem;
	box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
	width: 90%;
	max-width: 500px;
	max-height: 90vh;
	display: flex;
	flex-direction: column;
	z-index: 1;
	transform: scale(0.95);
	transition: transform 0.2s ease-in-out;
}

.dpfcrs-modal[aria-hidden="false"] .dpfcrs-modal-content {
	transform: scale(1);
}

.dpfcrs-modal-header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	padding: 1.5rem;
	border-bottom: 1px solid #e2e8f0;
	position: relative;
	gap: 1rem;
}

.dpfcrs-modal-title {
	font-size: 1.25rem;
	font-weight: 700;
	color: #111318;
	margin: 0;
}

.dpfcrs-modal-description {
	margin: 0;
	margin-top: 0.5rem;
	line-height: 1.5;
}

.dpfcrs-modal-close {
	background: none;
	border: none;
	cursor: pointer;
	color: #64748b;
	padding: 0.25rem;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 0.375rem;
	transition: all 0.2s;
}

.dpfcrs-modal-close:hover {
	background-color: #f8fafc;
	color: #111318;
}

.dpfcrs-modal-close .dpfcrs-icon {
	width: 1.25rem;
	height: 1.25rem;
}

.dpfcrs-modal-form {
	padding: 1.5rem;
	overflow-y: auto;
	flex: 1;
}

.dpfcrs-form-group {
	margin-bottom: 1.5rem;
}

.dpfcrs-form-group:last-child {
	margin-bottom: 0;
}

.dpfcrs-form-label {
	display: block;
	font-size: 0.875rem;
	font-weight: 500;
	color: #111318;
	margin-bottom: 0.625rem;
}

.dpfcrs-required {
	color: #ef4444;
	margin-left: 0.25rem;
}

.dpfcrs-form-input,
.dpfcrs-form-textarea {
	width: 100%;
	padding: 0.625rem 0.75rem;
	border: 1px solid #cbd5e1;
	border-radius: 0.5rem;
	font-size: 0.875rem;
	color: #111318;
	background-color: #ffffff;
	transition: border-color 0.2s;
	font-family: inherit;
}

.dpfcrs-form-input:focus,
.dpfcrs-form-textarea:focus {
	outline: none;
	border-color: var(--color-primary);
	box-shadow: 0 0 0 3px var(--color-primary-light);
}

.dpfcrs-form-textarea {
	resize: vertical;
	min-height: 100px;
}

.dpfcrs-modal-actions {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 0.75rem;
	margin-top: 1.5rem;
	padding-top: 1.5rem;
	border-top: 1px solid #e2e8f0;
}

.dpfcrs-btn {
	padding: 0.625rem 1.25rem;
	border-radius: 0.5rem;
	font-size: 0.875rem;
	font-weight: 500;
	cursor: pointer;
	transition: all 0.2s;
	border: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
}

.dpfcrs-btn-primary {
	background-color: var(--color-primary);
	color: #ffffff;
}

.dpfcrs-btn-primary:hover {
	background-color: var(--color-primary-hover);
}

.dpfcrs-btn-primary:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

.dpfcrs-btn-secondary {
	background-color: #ffffff;
	color: #64748b;
	border: 1px solid #e2e8f0;
}

.dpfcrs-btn-secondary:hover {
	background-color: #f8fafc;
	border-color: #cbd5e1;
}

/* ===== WORDPRESS ADMIN MENU LOGO ===== */
/* Style the custom logo in WordPress admin menu */
#adminmenu .toplevel_page_dpfcrs-connection .wp-menu-image {
	width: 36px;
	height: 34px;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
}

#adminmenu .toplevel_page_dpfcrs-connection .wp-menu-image img {
	width: 20px;
	height: 20px;
	padding: 0;
	margin: 0 auto;
	display: block;
	object-fit: contain;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

#adminmenu .toplevel_page_dpfcrs-connection .wp-menu-image::before {
	display: none !important;
}

/* Ensure proper alignment when menu is folded */
.folded #adminmenu .toplevel_page_dpfcrs-connection .wp-menu-image img {
	width: 20px;
	height: 20px;
}

/* ===== PRICING PAGE STYLES ===== */
.dpfcrs-pricing-card {
	position: relative;
	display: flex;
	flex-direction: column;
	height: auto;
	max-width: 100%;
}

.dpfcrs-pricing-card-featured {
	border: 2px solid var(--color-primary);
	box-shadow: 0 4px 6px -1px rgba(43, 108, 238, 0.1);
}

.dpfcrs-pricing-badge {
	position: absolute;
	top: -0.75rem;
	left: 50%;
	transform: translateX(-50%);
	background-color: var(--color-primary);
	color: #ffffff;
	font-size: 0.75rem;
	font-weight: 600;
	padding: 0.25rem 0.75rem;
	border-radius: 0.375rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	z-index: 1;
}

.dpfcrs-pricing-card-header {
	flex-direction: column;
	align-items: flex-start !important;
	justify-content: flex-start !important;
	padding-top: 1.25rem;
}

.dpfcrs-pricing-card-header-content {
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.75rem;
}

.dpfcrs-pricing-card-header .dpfcrs-card-title {
	margin: 0 !important;
	width: 100%;
}

.dpfcrs-pricing-amount {
	display: flex;
	align-items: baseline;
	gap: 0.25rem;
	margin-top: 0;
	width: 100%;
}

.dpfcrs-pricing-currency {
	font-size: 1.25rem;
	font-weight: 600;
	color: var(--color-text-main-light);
}

.dpfcrs-pricing-price {
	font-size: 2.25rem;
	font-weight: 700;
	color: var(--color-text-main-light);
	line-height: 1;
}

.dpfcrs-pricing-period {
	font-size: 1rem;
	font-weight: 400;
	color: var(--color-text-sub-light);
}

.dpfcrs-pricing-features {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 0.625rem;
	width: 100%;
	flex: 1;
}

.dpfcrs-pricing-feature {
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
	width: 100%;
}

.dpfcrs-pricing-feature-icon {
	flex-shrink: 0;
	color: var(--color-success);
	width: 1.25rem;
	height: 1.25rem;
	margin-top: 0.125rem;
}

.dpfcrs-pricing-feature span {
	font-size: 0.875rem;
	color: var(--color-text-main-light);
	line-height: 1.5;
	flex: 1;
}

/* ── Horizontal pricing card layout ──────────────────────────── */
.dpfcrs-pricing-card-horizontal {
	flex-direction: row;
	align-items: stretch;
}

.dpfcrs-pricing-card-left {
	width: 38%;
	min-width: 240px;
	padding: 0.875rem 1rem;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	border-right: 1px solid var(--color-border-light);
	flex-shrink: 0;
}

.dpfcrs-pricing-card-right {
	flex: 1;
	padding: 0.875rem 1rem;
	display: flex;
	align-items: center;
	min-width: 0;
}

.dpfcrs-pricing-features-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 0.375rem 1.25rem;
	flex-direction: unset;
	align-content: start;
	width: 100%;
}

@media (max-width: 768px) {
	.dpfcrs-pricing-card-horizontal {
		flex-direction: column;
	}
	.dpfcrs-pricing-card-left {
		width: 100%;
		min-width: unset;
		border-right: none;
		border-bottom: 1px solid var(--color-border-light);
	}
	.dpfcrs-pricing-features-grid {
		grid-template-columns: 1fr;
	}
}

.dpfcrs-faq-item {
	padding-bottom: 1.5rem;
	border-bottom: 1px solid var(--color-border-light);
}

.dpfcrs-faq-item:last-child {
	border-bottom: none;
	padding-bottom: 0;
}

.dpfcrs-faq-question {
	font-size: 1rem;
	font-weight: 600;
	color: var(--color-text-main-light);
	margin: 0 0 0.5rem 0;
}

.dpfcrs-faq-answer {
	font-size: 0.875rem;
	line-height: 1.6;
	margin: 0;
}

/* ===== TOOLTIP ===== */
.dpfcrs-tooltip-wrapper {
	position: relative;
	display: inline-block;
}

.dpfcrs-tooltip-wrapper button:disabled {
	pointer-events: none;
}

.dpfcrs-tooltip {
	visibility: hidden;
	opacity: 0;
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX(-50%);
	margin-top: 0.5rem;
	background-color: #1f2937;
	color: #ffffff;
	text-align: center;
	padding: 0.5rem 0.75rem;
	border-radius: 0.375rem;
	font-size: 0.75rem;
	white-space: nowrap;
	z-index: 1000;
	pointer-events: none;
	transition: opacity 0.2s, visibility 0.2s;
	box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.dpfcrs-tooltip::before {
	content: '';
	position: absolute;
	bottom: 100%;
	left: 50%;
	transform: translateX(-50%);
	border: 5px solid transparent;
	border-bottom-color: #1f2937;
}

.dpfcrs-tooltip-wrapper:hover .dpfcrs-tooltip {
	visibility: visible;
	opacity: 1;
}

/* Tab Navigation Styles */
.dpfcrs-tabs-wrapper {
	border-bottom: 1px solid #e5e7eb;
	margin-bottom: 1.5rem;
}

.dpfcrs-tabs-nav {
	display: flex;
	gap: 0;
}

.dpfcrs-tab-button {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.875rem 1.5rem;
	background: transparent;
	border: none;
	border-bottom: 2px solid transparent;
	color: #6b7280;
	font-size: 0.875rem;
	font-weight: 500;
	cursor: pointer;
	transition: color 0.2s ease;
	position: relative;
	margin-bottom: -1px;
}

.dpfcrs-tab-button:hover {
	color: #374151;
}

.dpfcrs-tab-button.dpfcrs-tab-active {
	color: #2563eb;
	border-bottom-color: #2563eb;
	font-weight: 600;
}

.dpfcrs-tab-icon {
	width: 18px;
	height: 18px;
	flex-shrink: 0;
	color: inherit;
}

/* Responsive tab styles */
@media (max-width: 768px) {
	.dpfcrs-tab-button {
		padding: 0.75rem 1rem;
		font-size: 0.8125rem;
		gap: 0.375rem;
	}
	
	.dpfcrs-tab-icon {
		width: 16px;
		height: 16px;
	}
}

.dpfcrs-tab-content {
	display: none;
}

.dpfcrs-tab-content.dpfcrs-tab-content-active {
	display: block;
}

/* Code Block Styles */
.dpfcrs-code-block {
	position: relative;
	background: #1f2937;
	border: 1px solid #374151;
	border-radius: 8px;
	padding: 14px 50px 14px 16px;
	margin: 8px 0;
	overflow: hidden;
}

.dpfcrs-code {
	font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'source-code-pro', monospace;
	font-size: 12px;
	color: #e5e7eb;
	word-break: break-all;
	display: block;
	line-height: 1.6;
}

.dpfcrs-code-copy {
	position: absolute;
	top: 10px;
	right: 10px;
	background: rgba(255, 255, 255, 0.15);
	border: 1px solid rgba(255, 255, 255, 0.3);
	border-radius: 6px;
	padding: 10px;
	cursor: pointer;
	transition: all 0.2s ease;
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	min-height: 40px;
	backdrop-filter: blur(4px);
	z-index: 10;
}

.dpfcrs-code-copy:hover {
	background: rgba(255, 255, 255, 0.2);
	border-color: rgba(255, 255, 255, 0.4);
	transform: scale(1.05);
}

.dpfcrs-code-copy:active {
	transform: scale(0.95);
}

.dpfcrs-code-copy-icon {
	width: 20px;
	height: 20px;
	color: #ffffff !important;
	transition: color 0.2s ease;
}

.dpfcrs-code-copy-icon svg {
	width: 100%;
	height: 100%;
	stroke: currentColor;
	stroke-width: 2;
}

.dpfcrs-code-copy:hover .dpfcrs-code-copy-icon {
	color: #ffffff !important;
	opacity: 0.9;
}

/* Step Number Styles */
.dpfcrs-step-number {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: #2563eb;
	color: #ffffff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 14px;
	font-weight: 600;
	flex-shrink: 0;
}

/* How to Use Steps Layout */
.dpfcrs-how-to-use-steps {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
}

.dpfcrs-step-item {
	display: flex;
	align-items: flex-start;
	gap: 1rem;
}

.dpfcrs-step-item .dpfcrs-step-number {
	align-self: flex-start;
	margin-top: 0;
	flex-shrink: 0;
}

.dpfcrs-step-content {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
}

.dpfcrs-step-title {
	font-size: 0.875rem;
	font-weight: 600;
	color: #1f2937;
	margin: 0 0 0.5rem 0;
	line-height: 1.5;
	display: flex;
	align-items: center;
	min-height: 32px;
}

.dpfcrs-step-description {
	font-size: 0.75rem;
	color: #6b7280;
	margin: 0;
	line-height: 1.6;
}

/* Background Color Utilities */
.dpfcrs-bg-gray-50 {
	background-color: #f9fafb;
}

.dpfcrs-bg-blue-50 {
	background-color: #eff6ff;
}

.dpfcrs-text-blue-600 {
	color: #2563eb;
}

/* Embed Sections - Equal Width Layout */
.dpfcrs-embed-sections {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1.5rem;
}

.dpfcrs-embed-sections .dpfcrs-embed-section {
	flex: 1;
	min-width: 0;
}

@media (max-width: 1024px) {
	.dpfcrs-embed-sections {
		grid-template-columns: 1fr;
	}
}


/* ===== BADGE VARIANTS ===== */
.dpfcrs-badge-error {
	background-color: #fee2e2;
	color: #991b1b;
}

.dpfcrs-badge-info {
	background-color: #dbeafe;
	color: #1e40af;
}

.dpfcrs-badge-secondary {
	background-color: #f1f5f9;
	color: #1e293b;
	font-weight: 500;
}

.dpfcrs-badge-warning {
	background-color: #fef3c7;
	color: #92400e;
}

/* ===== ALERT INFO VARIANT ===== */
.dpfcrs-alert-info {
	background-color: #eff6ff;
	border-color: #bfdbfe;
}

.dpfcrs-alert-info .dpfcrs-alert-icon {
	color: #2563eb;
}

.dpfcrs-alert-info .dpfcrs-alert-title {
	color: #1e3a8a;
}

.dpfcrs-alert-info .dpfcrs-alert-text {
	color: #1d4ed8;
}

/* ===== UTILITY CLASSES ===== */
.dpfcrs-mt-4 {
	margin-top: 1rem;
}

.dpfcrs-inline-flex {
	display: inline-flex;
}

.dpfcrs-block {
	display: block;
}

.dpfcrs-flex-shrink-0 {
	flex-shrink: 0;
}

.dpfcrs-px-3 {
	padding-left: 0.75rem;
	padding-right: 0.75rem;
}

.dpfcrs-py-2 {
	padding-top: 0.5rem;
	padding-bottom: 0.5rem;
}

.dpfcrs-py-4 {
	padding-top: 1rem;
	padding-bottom: 1rem;
}

.dpfcrs-space-y-1 > * + * {
	margin-top: 0.25rem;
}

.dpfcrs-space-y-2 > * + * {
	margin-top: 0.5rem;
}

.dpfcrs-space-y-6 > * + * {
	margin-top: 1.5rem;
}

.dpfcrs-list-disc {
	list-style-type: disc;
}

.dpfcrs-list-decimal {
	list-style-type: decimal;
}

.dpfcrs-list-inside {
	list-style-position: inside;
}

.dpfcrs-items-start {
	align-items: flex-start;
}

.dpfcrs-flex-wrap {
	flex-wrap: wrap;
}

.dpfcrs-mt-3 {
	margin-top: 0.75rem;
}

.dpfcrs-mb-3 {
	margin-bottom: 0.75rem;
}

.dpfcrs-pb-4 {
	padding-bottom: 1rem;
}

.dpfcrs-pt-3 {
	padding-top: 0.75rem;
}

/* ===== RESPONSIVE GRID CLASSES ===== */
@media (min-width: 1024px) {
	.lg\:dpfcrs-grid-cols-2 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.lg\:dpfcrs-col-span-6 {
		grid-column: span 6 / span 6;
	}

	.lg\:dpfcrs-col-span-12 {
		grid-column: span 12 / span 12;
	}
}

/* ===== ONBOARDING GRID ===== */
.dpfcrs-onboarding-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 0.75rem;
}

@media (max-width: 640px) {
	.dpfcrs-onboarding-grid {
		grid-template-columns: 1fr;
	}
}

/* Onboarding checkbox selection state */
.dpfcrs-onboarding-radio-option input[type="checkbox"]:checked + .dpfcrs-onboarding-radio-content {
	border-color: #6366f1;
	background: #eef2ff;
	box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

.dpfcrs-onboarding-radio-option input[type="checkbox"]:checked + .dpfcrs-onboarding-radio-content .dpfcrs-onboarding-radio-icon {
	background: #6366f1;
	color: #fff;
}

/* ===== LOGS TABLE COLUMNS ===== */
.dpfcrs-table-col-time {
	width: 15%;
	white-space: nowrap;
}

.dpfcrs-table-col-type {
	width: 10%;
}

.dpfcrs-table-col-message {
	width: 35%;
}

.dpfcrs-table-col-spaces {
	width: 15%;
}

.dpfcrs-table-col-pages {
	width: 25%;
}

.dpfcrs-table-cell-time,
.dpfcrs-table-cell-type,
.dpfcrs-table-cell-message,
.dpfcrs-table-cell-spaces,
.dpfcrs-table-cell-pages {
	padding: 0.75rem 1rem;
	vertical-align: top;
	font-size: 0.8125rem;
}

/* ===== FLEX UTILITIES ===== */
.dpfcrs-flex-col {
	flex-direction: column;
}

.dpfcrs-justify-center {
	justify-content: center;
}

/* ===== UI OVERRIDES ===== */

.dpfcrs-form-label { color: #374151; margin-bottom: 0.25rem !important; }

.dpfcrs-section-label {
	font-size: 0.6875rem;
	font-weight: 600;
	color: #374151;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	margin-bottom: 0.25rem;
}

.dpfcrs-form-fields-container { gap: 1.5rem !important; }

.dpfcrs-form-group { gap: 0.25rem; margin-bottom: 0 !important; }

.dpfcrs-form-help-text {
	margin-top: 0.2rem;
	font-size: 0.75rem;
}

.dpfcrs-form-fields-container > .dpfcrs-grid { gap: 1rem; }

.dpfcrs-form-group > .dpfcrs-grid { margin-top: 0.2rem; }

.dpfcrs-modal-form .dpfcrs-form-group { margin-bottom: 1.25rem !important; }
.dpfcrs-header-title { font-size: 0.9375rem !important; font-weight: 600 !important; line-height: 1.2 !important; margin: 0 !important; }
.dpfcrs-header-title-wrap { display: flex; flex-direction: column; gap: 0.2rem; }
.dpfcrs-header-subtitle { margin: 0 !important; font-size: 0.78rem; color: #4b5563; font-weight: 400; line-height: 1.3; }
.dpfcrs-sidebar-logo-title { font-size: 0.875rem !important; }
.dpfcrs-sidebar-logo { gap: 0.35rem !important; }
.dpfcrs-sidebar-logo-text { gap: 0 !important; }

.dpfcrs-card-title { font-size: 0.9375rem; }

.dpfcrs-radio-card-title { font-size: 0.875rem; font-weight: 500; }

#dpfcrs-connection-form .dpfcrs-radio-card {
	padding: 0.5rem 0.625rem;
	gap: 0.2rem;
}

#dpfcrs-connection-form .dpfcrs-radio-card-icon { width: 0.9rem; height: 0.9rem; color: #64748b; }

#dpfcrs-connection-form .dpfcrs-radio-card-indicator { height: 0.875rem; width: 0.875rem; flex-shrink: 0; }

#dpfcrs-connection-form .dpfcrs-radio-card-description { font-size: 0.75rem; line-height: 1.4; padding-left: 1.4rem; }

#dpfcrs-sync-config-form .dpfcrs-radio-card {
	padding: 0.75rem;
	gap: 0.15rem;
}

#dpfcrs-sync-config-form .dpfcrs-radio-card-icon { width: 1.1rem; height: 1.1rem; }

#dpfcrs-sync-config-form .dpfcrs-radio-card-indicator { height: 1rem; width: 1rem; flex-shrink: 0; }

#dpfcrs-sync-config-form .dpfcrs-radio-card-description { font-size: 0.8125rem; line-height: 1.4; padding-left: 1.6rem; }

.dpfcrs-sidebar-subheading {
	font-size: 0.6875rem;
	font-weight: 700;
	color: #374151;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.dpfcrs-note-callout {
	background-color: #f0f4ff;
	border-left: 3px solid var(--color-primary);
	border-radius: 0 0.375rem 0.375rem 0;
	padding: 0.6rem 0.75rem;
	margin-top: 0.875rem;
}

.dpfcrs-note-callout p { margin: 0; }

.dpfcrs-space-y-3 > * + * { margin-top: 0.75rem; }

/* Spaces & Pages page fixes */
.dpfcrs-main-container { gap: 1rem !important; }
.dpfcrs-tabs-wrapper { margin-bottom: 0 !important; }
.dpfcrs-tab-button { padding: 0.5rem 1rem !important; font-size: 0.8125rem !important; }
.dpfcrs-tab-icon { width: 15px !important; height: 15px !important; }
.dpfcrs-filter-title { font-size: 0.9375rem !important; font-weight: 600 !important; }
.dpfcrs-filter-group { justify-content: flex-end !important; }
.dpfcrs-table-toolbar { display: flex; align-items: center; justify-content: flex-start; padding: 0.625rem 1rem; background: #fff; border-bottom: 1px solid var(--color-border-light); }
.dpfcrs-card-body .dpfcrs-table-toolbar { border: none; padding: 0.5rem 0; background: transparent; }
.dpfcrs-table-spaces tbody td { padding: 0.625rem 1.25rem !important; }
.dpfcrs-table-spaces thead th { padding: 0.625rem 1.25rem !important; }
.dpfcrs-table-avatar-modern { width: 1.75rem !important; height: 1.75rem !important; font-size: 0.75rem !important; border-radius: 0.3rem !important; }
.dpfcrs-btn-xs { display: inline-flex; align-items: center; padding: 0.25rem 0.625rem; font-size: 0.75rem; font-weight: 500; border-radius: 0.375rem; border: 1px solid #d1d5db; background: #fff; color: #374151; cursor: pointer; transition: background 0.15s, border-color 0.15s; }
.dpfcrs-btn-xs:hover { background: #f3f4f6; border-color: #9ca3af; }
.dpfcrs-btn-xs-danger { color: #6b7280; }
.dpfcrs-btn-xs-danger:hover { background: #fef2f2; border-color: #fca5a5; color: #dc2626; }



/* ============================================
   Page Selection UX Improvements
   ============================================ */

/* Sync status dot */
.dpfcrs-sync-dot {
	display: inline-block;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	flex-shrink: 0;
	cursor: default;
}
.dpfcrs-sync-dot-synced {
	background-color: #16a34a;
	box-shadow: 0 0 0 2px rgba(22, 163, 74, 0.2);
}
.dpfcrs-sync-dot-unsynced {
	background-color: #d1d5db;
}

/* One-line toolbar: search + Select All | Deselect All + counter */
.dpfcrs-pages-toolbar {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin-bottom: 0.75rem;
}
.dpfcrs-pages-toolbar .dpfcrs-form-input-wrapper {
	flex: 1;
	min-width: 0;
}
.dpfcrs-pages-count {
	white-space: nowrap;
	font-size: 0.8rem;
	color: #6b7280;
	font-weight: 500;
	flex-shrink: 0;
}

/* Import Settings collapsible bar */
.dpfcrs-import-settings-bar {
	margin-bottom: 0.75rem;
	border: 1px solid #e5e7eb;
	border-radius: 0.375rem;
	overflow: hidden;
}
.dpfcrs-import-toggle {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	width: 100%;
	padding: 0.5rem 0.75rem;
	background: #f9fafb;
	border: none;
	cursor: pointer;
	font-size: 0.8rem;
	font-weight: 500;
	color: #4b5563;
	text-align: left;
	transition: background 0.15s;
}
.dpfcrs-import-toggle:hover {
	background: #f3f4f6;
}
.dpfcrs-import-toggle-icon {
	color: #6b7280;
	flex-shrink: 0;
}
.dpfcrs-import-toggle-arrow {
	margin-left: auto;
	font-size: 0.65rem;
	color: #9ca3af;
	transition: transform 0.2s;
	display: inline-block;
}
.dpfcrs-import-panel {
	padding: 0.75rem;
	background: #fff;
	border-top: 1px solid #e5e7eb;
}
.dpfcrs-import-panel .dpfcrs-flex {
	gap: 1rem;
}
.dpfcrs-import-panel .dpfcrs-form-label {
	font-size: 0.75rem;
	margin-bottom: 0.25rem;
}
.dpfcrs-import-panel .dpfcrs-form-select {
	font-size: 0.8rem;
	padding: 0.35rem 0.5rem;
}

/* Sync actions (buttons at bottom) */
.dpfcrs-sync-actions {
	margin-top: 1rem;
	padding-top: 1rem;
	border-top: 1px solid #e5e7eb;
}

/* Page tree item — comfortable row height (keep horizontal so JS indent works) */
.page-item {
	padding-top: 0.5rem !important;
	padding-bottom: 0.5rem !important;
}

/* Compact selected count span */
#dpfcrs-selected-count {
	display: inline-flex;
	align-items: center;
	gap: 0.15rem;
}

/* Page tree — compact text styling */
.dpfcrs-page-icon {
	width: 15px;
	height: 15px;
	flex-shrink: 0;
	color: #9ca3af;
}
.dpfcrs-page-title {
	font-size: 0.8rem;
	color: #374151;
	line-height: 1.3;
	font-weight: 400;
}
.page-item:hover .dpfcrs-page-title {
	color: #111827;
}
.page-item.page-item--parent > .dpfcrs-page-title,
.page-item .dpfcrs-page-title--folder {
	font-weight: 500;
}
.dpfcrs-page-count {
	font-size: 0.7rem;
	color: #9ca3af;
	font-weight: 400;
	flex-shrink: 0;
}


/* Tighter tree container padding — rows handle their own spacing */
#dpfcrs-pages-tree {
	padding: 0.25rem 0.5rem !important;
}

/* Compact page limit warning banner */
#dpfcrs-page-limit-notice {
	padding: 0.5rem 0.75rem;
	font-size: 0.8rem;
	margin-bottom: 0.5rem;
}
#dpfcrs-page-limit-notice .dpfcrs-alert-icon {
	width: 14px;
	height: 14px;
}

/* Embed shortcode in page tree */
.dpfcrs-shortcode-text {
	display: inline-block;
	max-width: 220px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-size: 0.7rem;
	font-family: ui-monospace, 'SFMono-Regular', Consolas, monospace;
	color: #6b7280;
	background: #f3f4f6;
	border: 1px solid #e5e7eb;
	border-radius: 0.25rem;
	padding: 0.1rem 0.35rem;
	vertical-align: middle;
	cursor: default;
}
.dpfcrs-shortcode-copy {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	background: none;
	border: none;
	cursor: pointer;
	color: #9ca3af;
	padding: 0.2rem;
	border-radius: 0.25rem;
	transition: color 0.15s, background 0.15s;
}
.dpfcrs-shortcode-copy:hover {
	color: #3b82f6;
	background: #eff6ff;
}
.dpfcrs-shortcode-copy--copied {
	color: #16a34a !important;
	background: #dcfce7 !important;
}

/* Upgrade to Pro limit badge (shown when page selection limit is hit) */
.dpfcrs-limit-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	padding: 0.2rem 0.6rem;
	background: #fff7ed;
	border: 1px solid #fed7aa;
	border-radius: 999px;
	font-size: 0.72rem;
	font-weight: 600;
	color: #c2410c;
	text-decoration: none;
	margin-bottom: 0.5rem;
	transition: background 0.15s;
}
.dpfcrs-limit-badge:hover {
	background: #ffedd5;
	color: #9a3412;
}

/* ===== STEPPER ===== */
.dpfcrs-stepper-header {
	display: flex;
	align-items: flex-start;
	padding: 1.25rem 1.5rem 1rem;
	border-bottom: 1px solid #e5e7eb;
}
.dpfcrs-step-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.4rem;
	flex-shrink: 0;
	cursor: pointer;
}
.dpfcrs-step-item:hover .dpfcrs-step-circle {
	transform: scale(1.12);
	box-shadow: 0 0 0 4px #dbeafe;
}
.dpfcrs-step-item:hover .dpfcrs-step-label {
	color: #2563eb;
	font-weight: 700;
}
.dpfcrs-step-circle {
	width: 2rem;
	height: 2rem;
	border-radius: 50%;
	border: 2px solid #d1d5db;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 0.8rem;
	font-weight: 600;
	color: #9ca3af;
	background: #fff;
	transition: all 0.2s;
	position: relative;
}
.dpfcrs-step-num  { display: inline; }
.dpfcrs-step-check { display: none; }
.dpfcrs-step-label {
	font-size: 0.7rem;
	color: #9ca3af;
	font-weight: 500;
	white-space: nowrap;
	transition: color 0.2s;
}
.dpfcrs-step-connector {
	flex: 1;
	height: 2px;
	background: #e5e7eb;
	margin: 0.9rem 0.4rem 0;
	transition: background 0.25s;
}
/* Active step */
.dpfcrs-step-item.dpfcrs-step-active .dpfcrs-step-circle {
	border-color: #2563eb;
	border-width: 2.5px;
	color: #2563eb;
	background: #eff6ff;
	box-shadow: 0 0 0 3px #dbeafe;
	width: 2.2rem;
	height: 2.2rem;
}
.dpfcrs-step-item.dpfcrs-step-active .dpfcrs-step-label {
	color: #2563eb;
	font-weight: 700;
	font-size: 0.72rem;
}
/* Completed step */
.dpfcrs-step-item.dpfcrs-step-completed .dpfcrs-step-circle {
	border-color: #2563eb;
	background: #2563eb;
	color: #fff;
}
.dpfcrs-step-item.dpfcrs-step-completed .dpfcrs-step-num  { display: none; }
.dpfcrs-step-item.dpfcrs-step-completed .dpfcrs-step-check { display: inline; }
.dpfcrs-step-item.dpfcrs-step-completed .dpfcrs-step-label { color: #2563eb; }
.dpfcrs-step-item.dpfcrs-step-completed { cursor: pointer; }
.dpfcrs-step-connector.dpfcrs-step-connector-active { background: #2563eb; }
/* Step panel */
.dpfcrs-step-panel-title {
	font-size: 0.95rem;
	font-weight: 600;
	color: #111827;
	margin: 0;
}
/* Link remap — toggle row bottom spacing */
#dpfcrs-link-remap-toggle-row {
	margin-bottom: 1.25rem;
}

/* Link remap — fields section */
#dpfcrs-link-remap-fields {
	padding-top: 0.25rem;
}

/* Link remap — multi-pair rows */
.dpfcrs-remap-pairs-header {
	display: grid;
	grid-template-columns: 1fr 1fr 2rem;
	gap: 0.5rem;
	font-size: 0.75rem;
	font-weight: 600;
	color: #64748b;
	padding: 0 0.125rem;
}

.dpfcrs-remap-pair-row {
	display: grid;
	grid-template-columns: 1fr auto 1fr auto;
	align-items: center;
	gap: 0.5rem;
	margin-bottom: 0.5rem;
}

.dpfcrs-remap-pair-arrow {
	color: #94a3b8;
	font-size: 1rem;
	flex-shrink: 0;
	padding: 0 0.125rem;
}

.dpfcrs-remap-remove-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 1.75rem;
	height: 1.75rem;
	padding: 0;
	color: #94a3b8;
	background: transparent;
	border: 1px solid transparent;
	border-radius: 0.3rem;
	cursor: pointer;
	transition: color 0.15s, background 0.15s, border-color 0.15s;
	flex-shrink: 0;
}

.dpfcrs-remap-remove-btn:hover:not(:disabled) {
	color: #ef4444;
	background: #fef2f2;
	border-color: #fecaca;
}

.dpfcrs-remap-remove-btn:disabled {
	opacity: 0.3;
	cursor: not-allowed;
}

/* Link remap preview */
.dpfcrs-link-remap-preview {
	border-top: 1px dashed #e2e8f0;
	padding-top: 0.75rem;
	margin-top: 0.25rem;
}
.dpfcrs-link-remap-preview > p {
	color: #94a3b8;
	margin-bottom: 0.375rem;
}
.dpfcrs-link-remap-preview-row {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}
.dpfcrs-link-remap-url {
	font-family: 'Monaco', 'Menlo', 'Consolas', monospace;
	font-size: 0.7rem;
	color: #94a3b8;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	flex: 1;
	min-width: 0;
}
.dpfcrs-link-remap-url--from {
	color: #f87171;
}
.dpfcrs-link-remap-url--to {
	color: #4ade80;
}
.dpfcrs-link-remap-arrow-icon {
	color: #cbd5e1;
	font-size: 0.875rem;
	flex-shrink: 0;
	line-height: 1;
}

/* Empty state (e.g. not connected) */
.dpfcrs-empty-state {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	padding: 3rem 2rem;
	gap: 0.75rem;
}
.dpfcrs-empty-state-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 4rem;
	height: 4rem;
	border-radius: 50%;
	background: #eff6ff;
	color: #2563eb;
	margin-bottom: 0.25rem;
}
.dpfcrs-empty-state-title {
	font-size: 1.1rem;
	font-weight: 600;
	color: #111827;
	margin: 0;
}
.dpfcrs-empty-state-desc {
	font-size: 0.875rem;
	color: #6b7280;
	max-width: 420px;
	margin: 0 0 0.5rem;
	line-height: 1.6;
}
.dpfcrs-empty-state-btn {
	display: inline-flex !important;
	align-items: center;
	gap: 0.4rem;
	padding: 0.45rem 1.1rem !important;
	background: #2563eb !important;
	color: #fff !important;
	font-size: 0.875rem;
	font-weight: 600;
	border-radius: 0.5rem;
	text-decoration: none !important;
	box-shadow: none !important;
	border: none !important;
	transition: background 0.2s;
	cursor: pointer;
}
.dpfcrs-empty-state-btn:hover,
.dpfcrs-empty-state-btn:focus {
	background: #1d4ed8 !important;
	color: #fff !important;
	text-decoration: none !important;
	box-shadow: none !important;
}

/* Back button (top of step panels) */
.dpfcrs-btn-back {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.9rem;
	height: 1.9rem;
	border-radius: 50%;
	border: 1px solid #e5e7eb;
	background: transparent;
	color: #6b7280;
	cursor: pointer;
	flex-shrink: 0;
	transition: background 0.15s, color 0.15s, border-color 0.15s;
	padding: 0;
}
.dpfcrs-btn-back:hover {
	background: #f3f4f6;
	border-color: #d1d5db;
	color: #111827;
}
.dpfcrs-btn-back svg {
	display: block;
}

/* Step footer */
.dpfcrs-step-footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: 1.5rem;
	padding-top: 1rem;
	border-top: 1px solid #e5e7eb;
}
.dpfcrs-step-footer .dpfcrs-btn:only-child {
	margin-left: auto;
}

/* ===== Page list skeleton loader ===== */
@keyframes dpfcrs-shimmer {
	0%   { background-position: -600px 0; }
	100% { background-position: 600px 0; }
}
.dpfcrs-skeleton {
	display: inline-block;
	border-radius: 4px;
	background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
	background-size: 600px 100%;
	animation: dpfcrs-shimmer 1.4s infinite linear;
	flex-shrink: 0;
}
.dpfcrs-skeleton-icon {
	width: 1rem;
	height: 1rem;
	border-radius: 3px;
}
.dpfcrs-skeleton-line {
	height: 0.75rem;
	border-radius: 4px;
	margin-left: 0.5rem;
}
.dpfcrs-page-skeleton-wrap {
	padding: 0.5rem 0;
}
.dpfcrs-skeleton-row {
	display: flex;
	align-items: center;
	padding: 0.45rem 0.25rem;
	border-bottom: 1px solid #f3f4f6;
}
.dpfcrs-skeleton-row-child {
	padding-left: 1.75rem;
}

/* Subtle small button icon */
.dpfcrs-btn-icon-subtle {
	opacity: 0.45;
	width: 0.85rem;
	height: 0.85rem;
	margin-right: 0.3rem;
}

/* ===== Shortcode guide collapsible ===== */
.dpfcrs-shortcode-guide {
	border: 1px solid #e5e7eb;
	border-radius: 0.5rem;
	overflow: hidden;
}
.dpfcrs-shortcode-guide-summary {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.6rem 0.85rem;
	cursor: pointer;
	font-size: 0.8rem;
	font-weight: 600;
	color: #4b5563;
	list-style: none;
	user-select: none;
	background: #f9fafb;
}
.dpfcrs-shortcode-guide-summary::-webkit-details-marker { display: none; }
.dpfcrs-shortcode-guide-summary:hover { background: #f3f4f6; }
.dpfcrs-shortcode-guide-arrow { margin-left: auto; font-size: 0.6rem; transition: transform 0.2s; }
details[open] .dpfcrs-shortcode-guide-arrow { transform: rotate(180deg); }
.dpfcrs-shortcode-guide-body {
	padding: 1rem;
	border-top: 1px solid #e5e7eb;
	background: #fff;
}
.dpfcrs-code-block-sm {
	padding: 0.4rem 0.6rem;
}
.dpfcrs-code-block-sm .dpfcrs-code {
	font-size: 0.7rem;
}

/* ===== Method explanation cards (Step 3) ===== */
.dpfcrs-method-card {
	flex: 1;
	display: flex;
	gap: 0.5rem;
	padding: 0.55rem 0.75rem;
	border: 1px solid #e5e7eb;
	border-radius: 0.5rem;
	background: #f9fafb;
}
.dpfcrs-method-card-icon {
	flex-shrink: 0;
	color: #3b82f6;
	margin-top: 2px;
}
.dpfcrs-method-card p {
	margin: 0;
	line-height: 1.4;
}
.dpfcrs-method-card p + p {
	margin-top: 0.35rem;
}