/* Index Manager Page */

.mop-ai-indexer-toolbar{
	margin: 10px 0 15px 0;
	display: flex;
	flex-wrap: nowrap;
	overflow-x: auto;
	align-items: center;
	gap: 8px;
}

.mop-ai-indexer-toolbar .page-title-action{
	margin: 0;
	top: 0;
}

.mop-ai-indexer-toolbar-form{
	display: inline-flex;
	margin: 0;
	padding: 0;
}

.mop-ai-indexer-toolbar-form .page-title-action{
	margin: 0;
	top: 0;
}

.mop-ai-indexer-file-status{
	margin-left: 0;
	font-weight: 600;
	color: #1a7f37;
	white-space: nowrap;
}

.mop-ai-indexer-config-card-grid{
	display: flex;
	flex-wrap: wrap;
	overflow-x: visible;
	gap: 10px;
	align-items: stretch;
}

.mop-ai-indexer-config-card{
	width: auto;
	flex: 1 1 350px;
	max-width: 350px;
	border: 1px solid #000;
	border-radius: 2px;
	padding: 10px;
	background: #fff;
	box-sizing: border-box;
}

.mop-ai-indexer-config-card p{
	margin: 0 0 8px 0;
}

@media (max-width: 782px){
	.mop-ai-indexer-config-card{
		max-width: none;
		flex-basis: 100%;
	}
}


/* Index File Generation */

.mop-ai-indexer-progress-ui{
	margin: 10px 0 20px 0;
}

.mop-ai-indexer-progress-bar-wrap{
	width: 100%;
	height: 12px;
	background: #e5e5e5;
	border-radius: 8px;
	overflow: hidden;
	box-sizing: border-box;
}

.mop-ai-indexer-progress-bar{
	height: 12px;
	background: #2271b1;
	width: 0%;
	transition: width 150ms linear;
}

.mop-ai-indexer-progress-meta{
	margin-top: 6px;
	display: flex;
	gap: 10px;
	align-items: center;
}

.mop-ai-indexer-progress-meta #mop-ai-indexer-progress-percent{
	font-weight: 600;
}

.mop-ai-indexer-progress-meta #mop-ai-indexer-progress-message{
	flex: 1;
}

.mop-ai-indexer-toolbar-btn{
	cursor: pointer;
}


/* Index Generation Logs */

.mop-ai-indexer-genlog-wrapper{
	margin: 10px 0 24px 0;
}

.mop-ai-indexer-genlog-box{
	border: 1px solid #ccd0d4;
	background: #fff;
	padding: 18px;
}

.mop-ai-indexer-genlog-lines{
	margin-top: 10px;
	padding-left: 24px;
	max-height: 320px;
	overflow: auto;
}

.mop-ai-indexer-genlog-line{
	margin: 4px 0;
}

.mop-ai-indexer-genlog-empty{
	color: #666;
}


/* Concept and Help Page */

.mop-ai-indexer-tabs {
	display: flex;
	flex-wrap: wrap;
	margin-top: 22px;
}

.mop-ai-indexer-tabs input[type="radio"] {
	display: none;
}

.mop-ai-indexer-tabs label {
	font-size: 15px;
	font-weight: bold;
	padding: 10px 12px;
	margin-right: 5px;
	cursor: pointer;
	border: 1px solid #c3c4c7;
	border-radius: 10px 10px 0px 0px;
	border-bottom: none;
	background-color: #f1f1f1;
	transition: background-color 0.3s ease;
}

.mop-ai-indexer-tabs input[type="radio"]:checked + label {
	background-color: #cccccc;
	border-bottom: 2px solid #ffffff;
}

.mop-ai-indexer-tab-content {
	display: none;
	width: 100%;
	padding: 12px;
	border: 1px solid #c3c4c7;
}

.mop-ai-indexer-tab-content h3 {
	margin: 30px 0px 0px 0px;
}

.mop-ai-indexer-tab-content p,
.mop-ai-indexer-tab-content ul li {
	font-size: 17px;
}

#mop-ai-indexer-tab-1:checked ~ #mop-ai-indexer-tab-content-1,
#mop-ai-indexer-tab-2:checked ~ #mop-ai-indexer-tab-content-2,
#mop-ai-indexer-tab-3:checked ~ #mop-ai-indexer-tab-content-3,
#mop-ai-indexer-tab-4:checked ~ #mop-ai-indexer-tab-content-4 {
	display: block;
}

#mop-ai-indexer-concept-div,
#mop-ai-indexer-cover-img,
#mop-ai-indexer-coming-soon-div,
#mop-ai-indexer-hooks-and-cons-div {
	width: 100%;
}

#mop-ai-indexer-cover-img {
	height: auto;
}

#mop-ai-indexer-concept-div,
#mop-ai-indexer-coming-soon-div {
	margin-bottom: 30px;
	text-align: justify;
}

/* Help Resources Tab */
#mop-ai-indexer-help-res-h2 {
	margin-bottom: 0px;
}

#mop-ai-indexer-help-res-div {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

.mop-ai-indexer-help-div {
	flex: 1 1 auto;
	margin: 10px;
	padding: 15px;
	border: 1px solid #ccc;
	border-radius: 8px;
	background-color: #f9f9f9;
	box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.mop-ai-indexer-help-text-div {
    min-height: 180px;
}

.mop-ai-indexer-help-iframe {
    width: 100%;
    min-width: 560px;
    max-width: 1120px;
    min-height: 315px;
    max-height: 630px;
    aspect-ratio: 16 / 9;
    margin-top: 20px;
    border: 1px solid #000000;
}

/* Hooks & Constants Tab */
#mop-ai-indexer-hooks-and-cons-div {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
	gap: 20px;
	justify-content: center;
	align-items: start;
}

.mop-ai-indexer-hooks-cons-div {
	margin: 10px;
	border: 1px solid #cccccc;
	border-radius: 8px;
	padding: 15px;
	background-color: #ffffff;
	box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.mop-ai-indexer-hooks-cons-div h3 {
	word-break: break-all;
	overflow-wrap: break-word;
}

.mop-ai-indexer-hooks-cons-text-div,
.mop-ai-indexer-hooks-cons-text-div code,
.mop-ai-indexer-hooks-cons-text-div a {
	word-break: break-word;
	overflow-wrap: anywhere;
	white-space: normal;
}


/* Styles for screens 1800px and larger */
@media screen and (min-width: 1800px) {

	/* Concept Tab */
	#mop-ai-indexer-concept-div {
		float: left;
		width: 40%;
		height: auto;
		margin-bottom: 0px;
	}

	#mop-ai-indexer-cover-img {
		float: left;
		width: 58%;
		height: 100%;
		margin-left: 2%;
		object-fit: contain;
	}

	.mop-ai-indexer-clearfix-1800px::after {
		content: "";
		display: table;
		clear: both;
	}
}

/* Styles for screens 662px and smaller */
@media (max-width: 662px) {

	/* Help Resources Tab */
	.mop-ai-indexer-help-iframe {
		min-width: 0;
		min-height: 0;
	}
}