/* ============================================
   WLC Admin Boilerplate (Layout + Theme)
   Extracted from Algolia plugin admin styles
   ============================================ */

/* Import Poppins font */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;700&display=swap');

/* Reset and Base Styles */
.wlc-algolia-admin-wrap {
	font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	margin: 0;
	padding: 0;
	background: #f7f7f7;
	min-height: 100vh;
}

/* Override WordPress admin styles (page-scoped) */
body.toplevel_page_wlc-algolia #wpcontent {
	padding-left: 0;
}

body.toplevel_page_wlc-algolia #wpbody-content {
	padding-left: 0;
}

.wlc-algolia-admin-wrap #wpbody-content {
	padding-bottom: 0;
}

.wlc-algolia-admin-wrap .wrap {
	margin: 0;
	padding: 0;
}

/* Header */
.wlc-algolia-header {
	display: flex;
	align-items: flex-end;
	gap: 48px;
	padding: 28px 0 28px 29px;
	background: white;
	border-bottom: 1px solid #e3e3e3;
	margin-left: 0;
}

.wlc-algolia-logo {
	width: 136px;
	height: 26px;
	flex-shrink: 0;
}

.wlc-algolia-logo svg {
	width: 100%;
	height: 100%;
}

.wlc-algolia-title {
	font-family: 'Poppins', sans-serif;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.5;
	color: #1c1c1c;
	text-transform: uppercase;
	margin: 0;
	padding-bottom: 0;
}

/* Content Wrapper */
.wlc-algolia-content-wrapper {
	display: flex;
	gap: 0;
	min-height: calc(100vh - 143px);
	background: #f7f7f7; /* no white gutter between sidebar and content */
	margin-left: 0;
	border-top: 1px solid #e3e3e3;
}

/* Sidebar */
.wlc-algolia-sidebar {
	width: 100px;
	background: white;
	padding: 48px 0;
	flex-shrink: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	border-right: 1px solid #e3e3e3;
	position: relative;
}

.wlc-algolia-sidebar-nav {
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 0;
	width: 100%;
	align-items: center;
}

.wlc-algolia-sidebar-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	padding: 18px 0;
	background: transparent;
	border-radius: 0;
	color: #393939;
	text-decoration: none;
	font-family: 'Poppins', sans-serif;
	font-size: 12px;
	font-weight: 400;
	line-height: 1.5;
	transition: all 0.2s ease;
	position: relative;
	width: 100%;
	text-align: center;
}

.wlc-algolia-sidebar-item:hover {
	color: #393939;
	background: #f5f5f5;
}

.wlc-algolia-sidebar-item.active {
	color: #393939;
	background: #f5f5f5;
}

.wlc-algolia-sidebar-item.active::before {
	content: '';
	position: absolute;
	right: 0;
	top: 0;
	bottom: 0;
	width: 3px;
	background: #000000;
	border-radius: 0;
}

/* Hover indicator (same as active) */
.wlc-algolia-sidebar-item:hover::before {
	content: '';
	position: absolute;
	right: 0;
	top: 0;
	bottom: 0;
	width: 3px;
	background: #000000;
	border-radius: 0;
}

.wlc-algolia-sidebar-icon {
	width: 20px;
	height: 20px;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #393939;
}

.wlc-algolia-sidebar-icon svg {
	width: 100%;
	height: 100%;
	display: block;
}

/* Icon color states (SVGs use currentColor) */
.wlc-algolia-sidebar-item:hover .wlc-algolia-sidebar-icon,
.wlc-algolia-sidebar-item.active .wlc-algolia-sidebar-icon {
	color: #db002f;
}

.wlc-algolia-sidebar-label {
	width: 100%;
	padding: 0;
	white-space: normal;
	text-align: center;
	font-size: 12px;
	line-height: 1.4;
}

/* Main Content */
.wlc-algolia-main-content {
	flex: 1;
	padding: 48px 0 0 54px;
	background: #f7f7f7;
	min-height: calc(100vh - 143px);
	position: relative;
	margin-left: 0;
}

/* Tabs */
.wlc-algolia-tabs {
	display: flex;
	gap: 32px;
	border-bottom: 1px solid #e5e7eb;
	margin-bottom: 24px;
	padding-bottom: 0;
}

.wlc-algolia-tab {
	font-family: 'Poppins', sans-serif;
	font-size: 12px;
	font-weight: 500;
	line-height: 1.5;
	color: #1c1c1c;
	text-decoration: none;
	padding: 8px 0;
	position: relative;
	background: none;
	border: none;
	cursor: pointer;
	transition: color 0.2s ease;
}

.wlc-algolia-tab:hover {
	color: #db002f;
}

.wlc-algolia-tab.active {
	color: #c6002b;
	border-bottom: 2px solid #c6002b;
	padding-bottom: 8px;
}

/* Content Card */
.wlc-algolia-content-card {
	background: white;
	border: 1px solid #e5e7eb;
	border-radius: 8px;
	padding: 24px;
	box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.08);
	max-width: 1320px;
}

.wlc-algolia-content-title {
	font-family: 'Poppins', sans-serif;
	font-size: 20px;
	font-weight: 400;
	line-height: 1.5;
	color: #1c1c1c;
	margin: 0 0 12px 0;
	text-transform: none;
}

/* Form Styles */
.wlc-algolia-content-card form {
	margin: 0;
}

.wlc-algolia-content-card .form-table {
	width: 100%;
	border-collapse: collapse;
	margin: 0;
}

.wlc-algolia-content-card .form-table th,
.wlc-algolia-content-card .form-table td {
	padding: 0;
	border: none;
	vertical-align: top;
}

.wlc-algolia-content-card .form-table th {
	display: none;
}

.wlc-algolia-content-card .form-table td {
	padding-bottom: 12px;
	display: block;
	width: 100%;
}

.wlc-algolia-content-card .form-table tbody {
	display: block;
}

.wlc-algolia-content-card .form-table tbody tr {
	display: block;
	margin-bottom: 12px;
}

.wlc-algolia-content-card .form-table tbody tr:last-child {
	margin-bottom: 0;
}

/* Input Fields */
.wlc-algolia-field-group {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-bottom: 12px;
	max-width: 800px;
}

/* Advanced Settings - Grid Layout (4 columns) */
.wlc-algolia-content-card form.general.is-advanced .form-table tbody {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 12px;
	margin-top: 12px;
}

.wlc-algolia-content-card form.general.is-advanced .form-table tbody tr {
	margin-bottom: 0;
	display: block;
}

.wlc-algolia-content-card form.general.is-advanced .form-table tbody tr td {
	padding-bottom: 0;
	width: 100%;
}

.wlc-algolia-content-card form.general.is-advanced .wlc-algolia-field-group {
	max-width: 100%;
	margin-bottom: 0;
}

.wlc-algolia-field-label {
	font-family: 'Poppins', sans-serif;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.5;
	color: #111928;
	margin: 0;
}

.wlc-algolia-field-input {
	width: 100%;
	background: white;
	border: 1px solid #c6c6c6;
	border-radius: 8px;
	padding: 12px 16px;
	font-family: 'Poppins', sans-serif;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.5;
	color: #1c1c1c;
	transition: border-color 0.2s ease;
	box-sizing: border-box;
}

.wlc-algolia-field-input:focus {
	outline: none;
	border-color: #db002f;
	box-shadow: 0 0 0 3px rgba(219, 0, 47, 0.1);
}

.wlc-algolia-field-input::placeholder {
	color: #9ca3af;
}

.wlc-algolia-field-description {
	font-size: 12px;
	color: #6b7280;
	margin-top: 4px;
}

/* Toggle Switch */
.wlc-algolia-toggle-wrapper {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 12px;
	flex-wrap: wrap;
}

.wlc-algolia-toggle {
	position: relative;
	display: inline-block;
	width: 40px;
	height: 20px;
}

.wlc-algolia-toggle input[type="checkbox"] {
	opacity: 0;
	width: 0;
	height: 0;
}

.wlc-algolia-toggle-slider {
	position: absolute;
	cursor: pointer;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: #c6c6c6;
	transition: 0.3s;
	border-radius: 20px;
}

.wlc-algolia-toggle-slider:before {
	position: absolute;
	content: "";
	height: 16px;
	width: 16px;
	left: 2px;
	bottom: 2px;
	background-color: white;
	border-radius: 50%;
	transition: 0.3s;
}

.wlc-algolia-toggle input:checked + .wlc-algolia-toggle-slider {
	background-color: #db002f;
}

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

.wlc-algolia-toggle-label {
	font-family: 'Poppins', sans-serif;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.5;
	color: #1c1c1c;
	margin: 0;
}

/* Buttons */
.wlc-algolia-button {
	font-family: 'Poppins', sans-serif;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.5;
	padding: 8px 24px;
	border: none;
	border-radius: 0;
	cursor: pointer;
	transition: all 0.2s ease;
	text-decoration: none;
	display: inline-block;
}

.wlc-algolia-button-primary {
	background: #db002f;
	color: white;
}

.wlc-algolia-button-primary:hover {
	background: #c6002b;
	color: white;
}

.wlc-algolia-button-secondary {
	background: white;
	color: #1c1c1c;
	border: 1px solid #c6c6c6;
}

.wlc-algolia-button-secondary:hover {
	background: #f7f7f7;
	color: #1c1c1c;
}

/* Submit Button */
.wlc-algolia-content-card .submit {
	margin-top: 24px;
	padding: 0;
	border: none;
}

.wlc-algolia-content-card .submit .button-primary,
.wlc-algolia-content-card .submit .wlc-algolia-save-button,
.wlc-algolia-content-card .submit input[type="submit"] {
	background: #db002f !important;
	border-color: #db002f !important;
	color: white !important;
	font-family: 'Poppins', sans-serif !important;
	font-size: 14px !important;
	font-weight: 700 !important;
	line-height: 1.5 !important;
	padding: 8px 24px !important;
	border-radius: 0 !important;
	height: 40px !important;
	box-shadow: none !important;
	text-shadow: none !important;
	cursor: pointer;
	transition: background 0.2s ease;
	min-width: auto;
}

/* Fallback: in case a submit is rendered without the WP <p class="submit"> wrapper */
.toplevel_page_wlc-algolia .wlc-algolia-content-card input[type="submit"].button-primary,
.toplevel_page_wlc-algolia .wlc-algolia-content-card input[type="submit"]#submit {
	background: #db002f !important;
	border-color: #db002f !important;
	color: white !important;
	font-family: 'Poppins', sans-serif !important;
	font-size: 14px !important;
	font-weight: 700 !important;
	line-height: 1.5 !important;
	padding: 8px 24px !important;
	border-radius: 0 !important;
	height: 40px !important;
	box-shadow: none !important;
	text-shadow: none !important;
	cursor: pointer;
}

.toplevel_page_wlc-algolia .wlc-algolia-content-card input[type="submit"].button-primary:hover,
.toplevel_page_wlc-algolia .wlc-algolia-content-card input[type="submit"]#submit:hover {
	background: #c6002b !important;
	border-color: #c6002b !important;
	color: white !important;
}

.wlc-algolia-content-card .submit .button-primary:hover,
.wlc-algolia-content-card .submit .wlc-algolia-save-button:hover,
.wlc-algolia-content-card .submit input[type="submit"]:hover {
	background: #c6002b !important;
	border-color: #c6002b !important;
	color: white !important;
}




