:root {

	/* Globally Functional Spacing Parameters */
	--cdtm-radius: 4px;
	--cdtm-transition: 0.15s ease-out;


	/* Core Light Theme Configuration */
	--cdtm-bg-main: #ffffff;
	--cdtm-bg-card: #ffffff;
	--cdtm-bg-stripe: #fffff0;
	--cdtm-bg-hover: #f0f6fa;
	--cdtm-bg-header: #f6f7f7;
	--cdtm-border-light: #f0f0f1;
	--cdtm-border-medium: #dcdcde;
	--cdtm-text-main: #333333;
	--cdtm-text-dark: #1d2327;
	--cdtm-text-muted: #646970;
	--cdtm-accent: #2271b1;
	--cdtm-btn-bg: #3944bc;
	--cdtm-btn-hover: #1520ab;
}

/* Dark Theme Token Intercept Mapping */
@media (prefers-color-scheme: dark){
	:root {
		--cdtm-bg-main: #121214;
		--cdtm-bg-card: #1a191f;
		--cdtm-bg-stripe: #22202a;
		--cdtm-bg-hover: #2d293a;
		--cdtm-bg-header: #16151a;
		--cdtm-border-light: #322d42;
		--cdtm-border-medium: #322d42;
		--cdtm-text-main: #f1edfa;
		--cdtm-text-dark: #ffffff;
		--cdtm-text-muted: #9c95b6;
		--cdtm-accent: #9d4edd;
		--cdtm-btn-bg: #9d4edd;
		--cdtm-btn-hover: #7b2cbf;
		--cdtm-highlight-bg: #ff007f;
	}
	}


/* Data Grid Architecture */


.cdtm-custom-table {
	width: 100%;
	border-collapse: collapse;
	margin: 24px 0;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
	font-size: 15px;
	color: var(--cdtm-text-main);
	line-height: 1.5;
	background-color: var(--cdtm-bg-card);
	box-shadow: 0 1px 3px rgba(0,0,0,0.05);
	border-radius: var(--cdtm-radius);
	overflow: hidden;
}


/* Table Column Headings */
.cdtm-custom-table th {
	background-color: var(--cdtm-bg-header);
	color: var(--cdtm-text-dark);
	font-weight: 600;
	text-transform: uppercase;
	font-size: 12px;
	letter-spacing: 0.5px;
	border-bottom: 2px solid var(--cdtm-border-medium);
	user-select: none;
	transition: background-color 0.2s ease;
}


/* Sorting Arrow Spans */
.cdtm-sort-arrow{
	color: var(--cdtm-accent);
	font-size: 11px;
	display: inline-block;
	vertical-align: middle;
	transition: transform 0.2s ease;
}

/* Table Cells * Row States */

.cdtm-custom-table th,
.cdtm-custom-table td{
	padding: 14px 16px;
	text-align: left;
}

.cdtm-custom-table td{
	border-bottom: 1px solid var(--cdtm-border-light);
}

/* Row Stripping Alternating Loops */
.cdtm-custom-table tbody tr:nth-child(odd){
	background-color: var(--cdtm-bg-stripe);
}

/* Row Hover States tracking */
.cdtm-custom-table tbody tr:hover{
	background-color: var(--cdtm-bg-hover);
}

/* Fallback Empty/Placeholder Elements Row */
.cdtm-custom-table td[colspan]{
	text-align: center;
	color: var(--cdtm-text-muted);
	font-style: italic;
	padding: 32px;
}


/* Global Interactive Sub-Components (Buttons, Highlights, Selects) */


/* Dynamic Search Highlighting */
mark.cdtm-highlight {
	background-color: var(--cdtm-highlight-bg) !important;
	color: #ffffff !important;
	padding: 0 !important;
	border-radius: 0 !important;
}

/* Core Functional Utility Action Buttons */
.cdtm-btn{
	display: inline-block !important;
	vertical-align: middle !important;
	margin-left: 10px !important;
	background-color: var(--cdtm-btn-bg) !important;
	color: #ffffff !important;
	border: none !important;
	padding: 8px 16px !important;
	border-radius: var(--cdtm-radius) !important;
	cursor: pointer !important;
	box-shadow: none !important;
	transition: background-color var(--cdtm-transition) !important;
}

.cdtm-btn:hover{
	background-color: var(--cdtm-btn-hover) !important;
	color: #ffffff !important;
	border: none !important;
}

/* Frontend Pagination Outer Wrapping Framework */
.cdtm-frotend-pagination-wrapper{
	margin: 20px 0 !important;
	text-align: center !important;
}

.cdtm-page-input-container {
	font-size: 14px !important;
	font-weight: 600 !important;
	margin: 0 15px !important;
	color: var(--cdtm-text-main) !important;
	display: inline-block !important;
	vertical-align: middle !important;
	}

#cdtm-page-info::-webkit-outer-spin-button,
#cdtm-page-info::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}


#cdtm-page-info{
	-moz-appearance: textfield;
	background-color: var(--cdtm-bg-main) !important;
	color: var(--cdtm-text-main) !important;
	border: 1px solid var(--cdtm-border-medium) !important;
	}

.cdtm-select{
	display: inline-block !important;
	vertical-align: middle !important;
	outline: none !important;
	background-color: var(--cdtm-bg-main) !important;
	color: var(--cdtm-text-main) !important;
	border: 1px solid var(--cdtm-border-medium) !important;
}

.cdtm-select:focus{
	border-color: var(--cdtm-accent) !important;
}


/* Floating Dropdown & Anchor Arrow Matrix */

.cdtm-preview-trigger {
	position: relative;
	color: var(--cdtm-accent);
	font-weight: 500;
	cursor: help;
	text-decoration: none;
}

.cdtm-preview-trigger:hover{
	text-decoration: underline;
}


/* Absolute Floating Box Element Blueprint */
.cdtm-dropdown-popup {
	position: absolute;
	z-index: 999999;
	width: 280px;
	background: var(--cdtm-bg-card);
	border: 1px solid var(--cdtm-border-medium);
	border-radius: var(--cdtm-radius);
	box-shadow: 0 4px 16px rgba(0,0,0,0.15);
	padding: 14px;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	font-size: 13px;
	line-height: 1.5;
	color: var(--cdtm-text-main);
	pointer-events: none;
	opacity: 0;
	transform: translateY(10px);
	transition: opacity var(--cdtm-transition), transform var(--cdtm-transition);
	}

.cdtm-dropdown-popup.is-active{
	opacity: 1;
	transform: translateY(0);
	}

.cdtm-dropdown-title{
	font-size: 15px;
	font-weight: 700;
	margin: 0 0 6px 0;
	color: var(--cdtm-text-dark);
}

.cdtm-dropdown-text{
	margin: 0;
	}

/* Geometric Pointer Anchor Arrow Mechanism */

.cdtm-dropdown-popup::before,
.cdtm-dropdown-popup::after{
	content: "";
	position: absolute;
	bottom: 100%;
	left: 30px;
	width: 0;
	height: 0;
	border: solid transparent;
}

/* 1px Outer Triangle Outline Border Masking */
.cdtm-dropdown-popup::before{
	border-bottom-color: var(--cdtm-border-medium);
	border-width: 8px;
	margin-left: -8px;
	}

/* Inner Core Solid Background Triangle Layer Fill */
.cdtm-dropdown-popup::after{
	border-bottom-color: var(--cdtm-bg-card);
	border-width: 7px;
	margin-left: -7px;
}

/* Mobile Card Adaptations */


@media screen and (max-width: 768px){
	/*Break traditional grid matrix into single fluid stackable content frames */
.cdtm-custom-table,
.cdtm-custom-table thead,
.cdtm-custom-table tbody,
.cdtm-custom-table th,
.cdtm-custom-table td,
.cdtm-custom-table tr{
	display: block;
}


/* Safe structural cloaking for flat wide heading bars */
.cdtm-custom-table thead tr{
	position: absolute;
	top: -9999px;
	left: -9999px;
}

/*Convert individual item rows into distinct mobile-ops product cards */
.cdtm-custom-table tr{
	border: 1px solid var(--cdtm-border-medium);
	margin-bottom: 16px;
	border-radius: var(--cdtm-radius);
	box-shadow: 0 1px 2px rgba(0,0,0,0.02);
	background: var(--cdtm-bg-card);
	}

/* Split layout boundaries into clear left-labeled value data streams */
.cdtm-custom-table td{
	border: none;
	border-bottom: 1px solid var(--cdtm-border-light);
	position: relative;
	padding-left: 45%;
	text-align: right;
	}

.cdtm-custom-table td:last-child{
	border-bottom: none;
	}

/* Inject inline field identifier labels via custom cell layout data attributes */
.cdtm-custom-table td::before{
	position: absolute;
	top: 14px;
	left: 16px;
	width: 40%;
	padding-right: 10px;
	white-space: nowrap;
	text-align: left;
	font-weight: 600;
	font-size: 12px;
	color: var(--cdtm-text-dark);
	text-transform: uppercase;
	letter-spacing: 0.5px;
	content: attr(data-label);
	}
}

	






























/*

/* targets overall table container to establish its layout, typography, and card-like appearance */
.cdtm-custom-table {
    width: 100%;	/* stretches the table grid to span 100% of its available container width */
    border-collapse: collapse;	/* merges adjacent cell borders together into clean, single-pixel lines */
    margin: 24px 0;	/* creates 24 pixels of space above and below the table structure */
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;  /* defines a native system font stack */
    font-size: 15px;	/* establishes the baseline font size for general data cell content */
    color: #333333;	/* sets the data text color to a crisp off-black for comfortable contrast */
    line-height: 1.5;	/* spaces lines of text at 1.5 times the font size to prevent overlapping */
    background-color: #ffffff;	/* paints the foundation background color of all cells solid white */
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05); /* adds a subtle drop shadow to isolate the table from the page background */
    border-radius: 4px;	/* softens the outer four corners of the table grame by 4 pixels */
    overflow: hidden;	/* clips cell backgrounds to ensure they do not bleed past the rounded corners */
}

/* targets the table header cells to style the title typography and borders */
.cdtm-custom-table th {
    background-color: #f6f7f7;	/* colors the header block backdrop with standard Wordpress gray */
    color: #1d2327;	/* sets header label typography to the offical WordPress dark admin gray */
    font-weight: 600;	/* sets the header text thickness to semi-bold */
    text-transform: uppercase; /* automatically converts all letters within the header into capital letters */
    font-size: 12px;	/* scales header labels down to 12 pixels to establish clear typography hierarchy */
    letter-spacing: 0.5px;     /* adds half a pixel of clear space between letters for tracking readability */
    border-bottom: 2px solid #dcdcde; /* places a distinct 2-pixel separator line beneath the header row */
    user-select: none;	/* disables browser text selection highlighting during user interactions */
    transition: background-color 0.2s ease;  /* transitions background color hsifts over 0.2 seconds with a smooth timing curve */
    position: relative;	/* roots a relative anchor context for absolute layout positioning inside headers */
}

/* targets the table header cells specifically when the user hovers their mouse cursor over them */
.cdtm-custom-table th:hover {
    background-color: #edeff0; /* Darkes the background tint slightly when a user hovers over a table header */
}

/* targets the interactive sort arrows that are dynamically injected next to the header text */
.cdtm-sort-arrow {
    color: #2271b1;	/* changes the sort indicator icon color to standard Wordpress interactive blue */
    font-size: 11px;	/* sets the font size of the sort arrow indicator to 11 pixels */
    display: inline-block; /* formats the element to accept vertical margins while remaining inline with text */
    vertical-align: middle; /*aligns the arrow element directly with the vertical midpoint of the adjacent text */
    transition: transform 0.2s ease; /* animates rotational arrow transformations over a 0.2 ease interval */
}

/* targets both header and data cells to enforce consistent spatial margins and text alignment */
.cdtm-custom-table th, 
.cdtm-custom-table td {
    padding: 14px 16px;	/* enforces a 14 pixel vertical and 16 pixel horizontal cell padding cusion */
    text-align: left;	/* forces all cell data content to snap flush against the left side of columns */
}

/* targets standard body data cells to create a thin seperating line between information rows */
.cdtm-custom-table td {
    border-bottom: 1px solid #f0f0f1; /* draws a 1-pixel seperating line under every individual record row */
}

/* targets alternating even rows inside the table body to apply a zebra striping effect */
.cdtm-custom-table tbody tr:nth-child(odd) {
    background-color: #fffff0; /* applies a warm offwhite ivory background to alternating even table rows */
}

/* targets any data row inside the table body when a user tracks over it with a mouse */
.cdtm-custom-table tbody tr:hover {
    background-color: #f0f6fa;	/* illuminates the active row with a soft sky-blue tint when tracked by a mouse pointer */
}

/* targets an empty data cell that spans all columns to display a centered placeholder message */
.cdtm-custom-table td[colspan] {
    text-align: center;	/* centers fallback text horizontally when columns are merged via colspan attributes */
    color: #646970;	/* dims empty status text down to a muted slate gray color tone */
    font-style: italic;	/* converts font presentation into slanted italics to indicate a placeholder state */
    padding: 32px;	/* expands internal cel spacing to 32 pixels to draw attention to empty states */
}





/* responsive block that isolates style adjustments to screns that have a max width of 768 pixels */
@media screen and (max-width: 768px) {

/* targets all structural components of the table to force them to stack vertically on mobile */
    .cdtm-custom-table, 
    .cdtm-custom-table thead, 
    .cdtm-custom-table tbody, 
    .cdtm-custom-table th, 
    .cdtm-custom-table td, 
    .cdtm-custom-table tr { 
        display: block;   /* breaks the traditional grid layout, forcing table tags to act like block divs */
    }
    
/* targets the desktop row headers to cleanly mask and hide them from tiny mobile viewports */
    .cdtm-custom-table thead tr { 
        position: absolute;	/* pulls desktop header row completely out of the natural page layout flow */
        top: -9999px;	/* banishes desktop header elements 9999 pixels off the top of the viewport */
        left: -9999px;	/* banishes desktop header elements 9999 pixels off the left of the viewport */
    }
    
/* targets rows to turn each multi-column entry into an independent mobile display card */
    .cdtm-custom-table tr { 
        border: 1px solid #dcdcde;	/* wraps each multi-column row entry into an isolated 1-pixel border block box */
        margin-bottom: 16px;	/* adds 16 pixels of vertical separating space between stacked row record blocks */
        border-radius: 4px;	/* rounds the mobile data card boundaries with a matching 4 pixel radius */
        box-shadow: 0 1px 2px rgba(0,0,0,0.02);	/* spreads an ultra thin shadow outline directly beneath the card layout */
        background: #ffffff;			/* seals the card base background with solid white to block layer bleeding */
    }


/* targets data cells to arrange them as side by side labeled rows within the mobile card     */
    .cdtm-custom-table td { 
        border: none;	/* strips out all default table borders from individual cell box boundaries */
        border-bottom: 1px solid #f0f0f1; /* slides an inner light horizontal dividing rule under individual cell lines */ 
        position: relative;	/*provides a fixed positioning coordinate baseline for anchoring responsive labels */
        padding-left: 45%; 	/* reserves a 45% wide clear column margin on the left side of the row line block */
        text-align: right;	/* aligns column content strings flush right against the data card boundary layout */
    }
    
/* targets the very last cell within a mobile card to remove its bottom dividing line */
    .cdtm-custom-table td:last-child {
        border-bottom: none;	/* erases the inner light separating line from the bottom of the last data row cell */
    }
    

/* targets pseudo-elements to inject custom column header tags on the left side of the cells */
    .cdtm-custom-table td::before { 
        position: absolute;	/* snaps the mobile column label element strictly inside the left padding zone */
        top: 14px;	/* vertical offset to perfectly center align labels with the content text height */
        left: 16px;	/* horizontal offset to give labels breathing space from the card's left boundary */
        width: 40%; 	/* controls label text wrapping area blocks, capping row tag names at a 40% threshold */
        padding-right: 10px;
	white-space: nowrap;
	text-align: left;
	font-weight: 600;
	font-size: 12px;
	color: #1d2327;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	content: attr(data-label);
}
}


mark.cdtm-highlight{
	background-color: #4d4dff !important;
	color: #ffffff !important;
	padding: 0 !important;
	border-radius: 0 !important;
}

.cdtm-btn{
	display: inline-block !important;
	vertical-align: middle !important;
	margin-left: 10px !important;
	background-color: #3944bc !important;
	color: #ffffff !important;
	border: none !important;
	padding: 8px 16px !important;
	border-radius: 4px !important;
	cursor: pointer !important;
	box-shadow: none !important;
}

.cdtm-btn:hover{
	background-color: #1520ab !important;
	color: #ffffff !important;
	border: none !important;
}


.cdtm-frontend-pagination-wrapper {
	margin: 20px 0 !important;
	text-align: center !important;
}

.cdtm-page-input-container{
	font-size: 14px !important;
	font-weight: 600 !important;
	margin: 0 15px !important;
	color: #333333 !important;
	display: inline-block !important;
	vertical-align: middle !important;
}

#cdtm-page-info::-webkit-outer-spin-button,
#cdtm-page-info::-webkit-inner-spin-button{
	-webkit-appearance: none;
	margin: 0;
}
#cdtm-page-info{
	-moz-appearance: textfield;
}

.cdtm-select{
	display: inline-block !important;
	vertical-align: middle !important;
	outline: none !important;
}

.cdtm-select:focus{
	border-color: #3944bc !important;
}



.cdtm-preview-trigger{
	position: relative;
	color: #2271b1;
	font-weight: 500;
	cursor: help;
	text-decoration: none;
	}

.cdtm-preview-trigger:hover{
	text-decoration: underline;
}

.cdtm-dropdown-popup{
		position: absolute;
		z-index: 99999;
		width: 280px;
		background: #ffffff;
		border: 1px solid #ccd0d4;
		border-radius: 4px;
		box-shadow: 0 4px 16px rgba(0,0,0,0.15);
		padding: 14px;
		font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
		font-size: 13px;
		line-height: 1.5;
		color: #2c3338;
		pointer-events: none;
		opacity: 0;
		transform: translateY(10px);
		transition: opacity 0.15s ease-out, transform 0.15s ease-out;
		}


.cdtm-dropdown-popup.is-active{
	opacity: 1;
	transform: translateY(0);
}

.cdtm-dropdown-title{
	font-size: 15px;
	font-weight: 700;
	margin: 0 0 6px 0;
	color: #1d2327;
}

.cdtm-dropdown-text{
	margin: 0;
}

/* Anchor Arrow Mechanism */

.cdtm-dropdown-popup::before,
.cdtm-dropdown-popup::after{
	content: "";
	position: absolute;
	bottom: 100%;
	left: 30px;
	width: 0;
	height: 0;
	border: solid transparent;
}

.cdtm-dropdown-popup::before{
	border-bottom-color: #ccd0d4;
	border-width: 8px;
	margin-left: -8px;
}

.cdtm-dropdown-popup::after{
	border-bottom-color: #ffffff;
	border-width: 7px;
	margin-left: -7px;
}
		




@media (prefers-color-scheme: dark){
	:root {
		--cdtm-bg-main: #121214;
		--cdtm-bg-card: #1a191f;
		--cdtm-bg-stripe: #22202a;
		--cdtm-bg-hover: #2d293a;
		--cdtm-bg-header: #16151a;
		--cdtm-border: #322d42;
		--cdtm-text: #f1edfa;
		--cdtm-text-muted: #9c95b6;
		--cdtm-accent: #9d4edd;
		--cdtm-accent-hover: #7b2cbf;
		}

	.cdtm-custom-table{
		background-color: var(--cdtm-bg-card);
		color: var(--cdtm-text);
		box-shadow: 0 4px 20px rgba(0,0,0, 0.5);
		}

	.cdtm-custom-table th{
		background-color: var(--cdtm-bg-header);
		color: var(--cdtm-text);
		border-bottom: 2px solid var(--cdtm-border);
		}

	.cdtm-custom-table th:hover {
		background-color: var(--cdtm-bg-hover);
		}

	.cdtm-sort-arrow{
		color: var(--cdtm-accent);
	}

	
	.cdtm-btn{
		background-color: var(--cdtm-accent) !important;
		color: #ffffff !important;
		}

	.cdtm-btn:hover{
		background-color: var(--cdtm-accent-hover) !important;
		}

	.cdtm-custom-table td{
		border-bottom: 1px solid var(--cdtm-border);
	}

	.cdtm-custom-table tbody tr:nth-child(odd){
		background-color: var(--cdtm-bg-stripe);
	}

	

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


	.cdtm-page-input-container{
		color: var(--cdtm-text) !important;
	}


	.cdtm-select,
	#cdtm-page-info{
		background-color: var(--cdtm-bg-main) !important;
		color: var(--cdtm-text) !important;
		border: 1px solid var(--cdtm-border) !important;
	}


	.cdtm-select:focus{
		border-color: var(--cdtm-accent) !important;
	}


	mark.cdtm-highlight{
		background-color: #ff007f !important;
		color: #ffffff !important;
	}

	.cdtm-custom-table td[colspan] {
		color: var(--cdtm-text-muted);
	}

	.cdtm-dropdown-popup{
		background: #1a191f;
		border-color: #322d42;
		color: #f1edfa;
		box-shadow: 0 6px 20px rgba(0,0,0,0.4);
	}

	.cdtm-dropdown-title{
		color: #ffffff;
	}

	.cdtm-dropdown-popup::before{
		border-bottom-color: #322d42;
	}

	.cdtm-dropdown-popup::after{
		border-bottom-color: #1a191f;
	}


	@media screen and (max-width: 768px){
		.cdtm-custom-table tr{
			border: 1px solid var(--cdtm-border);
			background: var(--cdtm-bg-card);
		}

		.cdtm-custom-table td{
			border-bottom: 1px solid var(--cdtm-border);
		}

		.cdtm-custom-table td::before {
			color: var(--cdtm-text-muted);
		}
	}
}

*/