/*TABS*/
.frontend-tabs {
	display: flex;
	border-bottom: 1px solid #ccc; /* garis bawah container */
	margin-bottom: 20px;
}

.frontend-tabs a {
	display: inline-block;
	padding: 10px 20px;
	text-decoration: none;
	color: #555;
	border: 1px solid #ccc;
	border-bottom: none; /* hilangkan border bawah agar menyatu dengan konten */
	background: #f5f5f5;
	margin-right: 2px;
	font-weight: 500;
	transition: background 0.2s, color 0.2s;
}

.frontend-tabs a:hover {
	background: #e0e0e0;
	color: #000;
}

.myfd-field {
    margin-bottom: 10px;
}

/*IMAGE PREVIEW*/
#thumbnail-preview-box{
	position:relative;
	width:220px;
	height:220px;

	border:2px dashed #008FD7;
	border-radius:8px;

	overflow:hidden;
	background:#f8f8f8;

	cursor:pointer;
}

#thumbnail-preview{
	width:100%;
	height:100%;
}

.choose-image-text{
	width:100%;
	height:100%;

	display:flex;
	align-items:center;
	justify-content:center;

	font-size:16px;
	font-weight:600;
	color:#008FD7;

	text-align:center;
	padding:20px;
	box-sizing:border-box;
}

#remove-thumbnail-preview{
	position:absolute;
	top:8px;
	right:8px;
	z-index:2;

	width:28px;
	height:28px;
	padding:0;

	display:flex;
	align-items:center;
	justify-content:center;

	border:none;
	border-radius:50%;

	background:rgba(0,0,0,0.7);
	color:#fff;

	font-size:16px;
	line-height:1;
	cursor:pointer;

	display:none;
}

#thumbnail-preview-box.has-image #remove-thumbnail-preview{
	display:flex;
}


.frontend-tabs a.active {
	background: #fff;
	color: #000;
	border-top: 3px solid #0073aa; /* garis atas untuk tab aktif */
	font-weight: bold;
	position: relative;
	z-index: 2; /* supaya tab aktif di atas border lain */
}

.frontend-tabs a:first-child {
	margin-left: 0;
}

'
/* Tab modal pilih media library frontend */
.media-modal .media-menu-item {
color: #000 !important;
font-weight: 600;
}
.media-modal .media-menu-item.active,
.media-modal .media-menu-item:hover,
.media-modal .media-menu-item:focus {
color: #0073aa !important; 
}
.media-modal-content {
background: #fff !important;
}

/* Close button modal */
.media-modal-close .media-modal-icon {
color: #000 !important;
}
.media-modal-close .screen-reader-text {
color: #000 !important;  
}
.media-modal-close:hover,
.media-modal-close:focus {
color: #0073aa !important;
}

.myfd-btn-basic {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;

background: #fff !important;
color: #008FD7 !important;
border: 1px solid #008FD7 !important;
border-radius: 4px;

font-size: 16px;
font-weight: bold;
line-height: 1.2;

padding: 10px 16px;
margin-top: 10px;

transition: 0.3s ease;
cursor: pointer;
text-align: center;
}

.myfd-btn-basic img.emoji {
width: 18px;
height: 18px;
margin-right: 2px;
vertical-align: middle;
}

.myfd-btn-basic:hover {
background: #008FD7 !important;
color: #fff !important;
}

.myfd-btn{
	display:inline-block;
	margin-top:0;
	margin-bottom:5px;
	padding:8px 12px;
	border: 1px solid #008fd7;
	color:#008fd7 !important;
	font-size:14px;
	font-weight:600;
	border-radius:8px;
	text-decoration:none;
	text-align:center;
	transition:0.3s ease;
}

.myfd-btn:hover{
	background:#0077b3;
	color:#fff !important;
}

/* Mobile */
@media (max-width:768px){
	.myfd-btn{
		display:block;
		width:100%;
		box-sizing:border-box;
	}
}
body,
.page,
.page .site-content,
.page .entry-content {
background: #ffffff !important;
color: #000 !important;
}

.frontend-tabs {
border-bottom: 2px solid #ddd;
display: flex;
margin-bottom: 15px;
flex-wrap: wrap;
}

.frontend-tabs a {
padding: 10px 20px;
text-decoration: none;
color: #555;
border: 1px solid #ddd;
border-bottom: none;
margin-right: 2px;
border-radius: 5px 5px 0 0;
background: #f5f5f5;
}

.frontend-tabs a.active {
background: #fff;
color: #000;
font-weight: bold;
border-bottom: 2px solid #fff;
}

.notice {
padding: 10px;
margin: 10px 0;
border-radius: 4px;
}

table.frontend-table {
width: 100%;
border-collapse: collapse;
margin-top: 20px;
background: #fff !important;
color: #000 !important;
}

table.frontend-table th,
table.frontend-table td {
padding: 8px;
vertical-align: top;
color: #000 !important;
}

table.frontend-table th {
background: #008FD7;
color: #fff !important;
font-weight: bold;
text-align: center;
}

table.frontend-table td {
text-align: center !important;
}

table.frontend-table td:nth-of-type(2) {
text-align: left;
} /* Judul tetap kiri */

table.frontend-table img {
max-width: 100px;
height: auto;
}

.status-draft {
color: #fff;
background: #f39c12;
padding: 2px 6px;
border-radius: 4px;
font-size: 0.85em;
}

.status-pending {
color: #fff;
background: #3498db;
padding: 2px 6px;
border-radius: 4px;
font-size: 0.85em;
}

.status-publish {
color: #fff;
background: #2ecc71;
padding: 2px 6px;
border-radius: 4px;
font-size: 0.85em;
}

form.frontend-post label,
form.frontend-profile label {
display: block;
margin-bottom: 5px;
font-weight: bold;
}

form.frontend-post input[type=text],
form.frontend-post select,
form.frontend-post textarea,
form.frontend-profile input[type=text],
form.frontend-profile textarea {
width: 100%;
padding: 8px;
margin-bottom: 2px;
border: 1px solid #ccc;
border-radius: 4px;
color: #000;
}

form.frontend-post input[type=file],
form.frontend-profile input[type=file] {
margin-bottom: 15px;
}

form.frontend-post button,
form.frontend-profile button {
padding: 8px 15px;
margin-right: 10px;
cursor: pointer;
}

.required {
color: red;
}

.form-label {
padding: 5px 10px;
color: #fff;
font-weight: bold;
margin-bottom: 10px;
border-radius: 3px;
}

.form-label.new {
background: pink;
color: black;
}

.form-label.edit {
background: #2ecc71;
}

/*MOBILE*/
.frontend-table-wrapper {
width: 100%;
overflow-x: auto;
}
.frontend-table {
width: 100%;
border-collapse: collapse;
min-width: 800px; /* agar scroll muncul jika layar sempit */
}
.frontend-table th,
.frontend-table td {
border:1px solid #ddd;
padding:8px;
text-align:center;
}
.frontend-table th {
background:#008FD7;
color:#fff;
font-weight:bold;
}
.frontend-table td:nth-of-type(2) { text-align:left; } /* Judul tetap kiri */
.password-wrapper {
position: relative;
width: 100%;
}

/*CHANGE PWD*/
.password-wrapper input {
width: 100%;
padding-right: 40px; /* ruang untuk toggle */
box-sizing: border-box;
}
.password-wrapper .toggle-password {
position: absolute;
right: 10px;
top: 50%;
transform: translateY(-50%);
cursor: pointer;
font-size: 1.1em;
color: #555;
}

/* DataTables minimal style override to match look */
table.dataTable thead th {
background: #008FD7 !important;
color: #fff !important;
}

/* MOBILE TAB IMPROVEMENT */
@media (max-width: 768px){

	.frontend-tabs{
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 6px;
		border: none;
	}

	.frontend-tabs a{
		text-align: center;
		border-radius: 6px;
		border: 1px solid #ddd;
		padding: 10px;
		margin: 0;
	}

	.frontend-tabs a.active{
		background: #0073aa;
		color: #fff;
		border-color: #0073aa;
	}
}

/* PROFILE */
.profile-box{
	background:#f9fafb;
	border:1px solid #e5e7eb;
	padding:12px;
	border-radius:8px;
	margin-bottom:15px;
}

.profile-header{
	display:flex;
	justify-content:space-between;
	align-items:center;
	margin-bottom:8px;
}

.profile-label{
	font-weight:600;
}

.profile-link-wrap{
	overflow-x:auto;
	white-space:nowrap;
	padding:6px 0;
}

.profile-link-wrap a{
	color:#1E73BE;
	text-decoration:none;
	font-size:16px;	
}

.profile-link-wrap a:hover{
	text-decoration:underline;
}

.profile-note{
	margin-top:8px;
	font-size:16px;
	color:#444;
	line-height:1.6;
	text-align:justify;

	background: #fff7ed;        
	border-left: 4px solid #f59e0b; 
	padding: 10px 12px;
	border-radius: 6px;

	box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}
	
/* SELECT2 CONTAINER */
.select2-container--default .select2-selection--multiple  {
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: nowrap !important;  
	align-items: center !important;

	height: 38px !important;
	padding: 4px 6px; !important;

	overflow-x: auto;  /* kalau penuh jadi geser, bukan turun */
	overflow-y: hidden;
}

/* CHIP */
.select2-container--default .select2-selection--multiple .select2-selection__choice {
	display: inline-flex !important;
	align-items: center;
	white-space: nowrap;
	margin: 0 4px 0 0 !important;
}

/* SEARCH AREA */
.select2-container--default .select2-search--inline {
	display: inline-flex !important;
	align-items: center !important;
	flex: 1 0 auto !important;
}

/* INPUT */
.select2-container--default .select2-search--inline .select2-search__field {
	margin: 0 !important;
	padding: 0 !important;
	line-height: 1 !important;
	min-width: 50px;
}

@media (max-width: 768px){
	.select2-container--default .select2-selection--multiple {
		height: auto !important;
		min-height: 38px;
	}
}

/*MODAL AUTO DRAFT*/
.myfd-modal {
	display:none;
	position:fixed;
	top:0; left:0;
	width:100%; height:100%;
	background:rgba(0,0,0,0.5);
	z-index:9999;
}

.myfd-modal-box {
	position:absolute;
	top:50%;
	left:50%;
	transform:translate(-50%, -50%); 

	background:#fff;
	padding:20px;
	border-radius:8px;
	max-width:300px;
	width:90%;
	text-align:center;
	box-shadow:0 10px 25px rgba(0,0,0,0.2);
}

.myfd-modal-text {
	margin-bottom:20px;
	font-size:14px;
}

.myfd-modal-actions button {
	margin:5px;
	padding:6px 12px;
	border:none;
	border-radius:4px;
	cursor:pointer;
}

#myfd-modal-ok {
	background:#2ecc71;
	color:#fff;
}

#myfd-modal-cancel {
	background:#e74c3c;
	color:#fff;
}

/*SEO*/
/*SEO TITLE*/
.myfd-seo-title-counter {
    margin-top: 5px;
    font-size: 12px;
    font-weight: 500;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 6px;
}

.myfd-seo-title-status {
    font-weight: 700;
}

/* STATUS COLORS */
.myfd-seo-title-bad {
    color: #e53935; /* merah */
}

.myfd-seo-title-warning {
    color: #fb8c00; /* orange */
}

.myfd-seo-title-good {
    color: #43a047; /* hijau */
}

.myfd-seo-title-over {
    color: #8e24aa; /* ungu */
    font-weight: 600;
}

/*SEO CONTENT/WORD/CHAR*/
/* ===============================
   SEO BOX BASE
=============================== */

.myfd-seo-box {
    margin-top: 10px;
    padding: 12px 14px;
    border: 1px solid #e5e7eb;
    border-left: 4px solid #9ca3af;
    border-radius: 8px;
    background: #fafafa;
    font-size: 12px;
    transition: all 0.25s ease;
}

/* TITLE */
.myfd-seo-title {
    font-weight: 700;
    font-size: 13px;
    margin-bottom: 2px;
    color: #111827;
}

/* RULE INFO */
.myfd-seo-rule {
    font-size: 11px;
    color: #6b7280;
    margin-bottom: 6px;
}

/* COUNTER */
.myfd-seo-counter {
    color: #374151;
    display: flex;
    gap: 6px;
    align-items: center;
}

/* ===============================
   STATUS PILL BASE
=============================== */

.myfd-seo-status {
    margin-top: 6px;
    display: inline-block;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.4px;
    color: #fff;
    transition: all 0.25s ease;
}

/* ===============================
   GREEN (GOOD)
=============================== */

.myfd-seo-good {
    background: #22c55e; /* pill */
    color: #fff;
}

.myfd-seo-box.myfd-seo-good {
    background: #f0fdf4; /* pastel */
    border-left-color: #22c55e;
}

/* ===============================
   ORANGE (WARNING)
=============================== */

.myfd-seo-warning {
    background: #f59e0b;
    color: #fff;
}

.myfd-seo-box.myfd-seo-warning {
    background: #fffbeb;
    border-left-color: #f59e0b;
}

/* ===============================
   RED (BAD)
=============================== */

.myfd-seo-bad {
    background: #ef4444;
    color: #fff;
}

.myfd-seo-box.myfd-seo-bad {
    background: #fef2f2;
    border-left-color: #ef4444;
}

/* ===============================
   PURPLE (OVER LIMIT)
=============================== */

.myfd-seo-over {
    background: #a855f7;
    color: #fff;
}

.myfd-seo-box.myfd-seo-over {
    background: #faf5ff;
    border-left-color: #a855f7;
}


#postTable th,
#postTable td {
    text-align: center !important;
    vertical-align: middle;
}

#postTable td:nth-child(5),
#postTable th:nth-child(5) {
    text-align: left !important;
}