/*
 * SAEC SEO Admin UI
 * Scope: admin screens of this plugin only.
 */

:root{
	--saec-seo-primary:#1E4DFF;
	--saec-seo-primary-2:#0B2CFF;
	--saec-seo-navy:#07122B;
	--saec-seo-ink:#0F172A;
	--saec-seo-muted:#64748B;
	--saec-seo-bg:#F6F8FB;
	--saec-seo-card:#FFFFFF;
	--saec-seo-border:rgba(15,23,42,.10);
	--saec-seo-border-2:rgba(15,23,42,.14);
	--saec-seo-radius:18px;
	--saec-seo-radius-sm:12px;
	--saec-seo-shadow:0 14px 38px rgba(2,6,23,.10);
	--saec-seo-shadow-soft:0 10px 22px rgba(2,6,23,.08);
}

#wpcontent{
	background: var(--saec-seo-bg);
}

.wrap .saec-seo-header{
	display:flex;
	align-items:flex-start;
	justify-content:space-between;
	gap:16px;
	padding:22px 22px 18px;
	border-radius: var(--saec-seo-radius);
	background: linear-gradient(135deg, rgba(30,77,255,.14), rgba(0,209,255,.10));
	border: 1px solid rgba(30,77,255,.18);
	box-shadow: var(--saec-seo-shadow-soft);
	margin: 10px 0 18px;
}

.wrap .saec-seo-title h1{
	margin:0 0 6px;
	font-size: 28px;
	line-height: 1.15;
	letter-spacing: -0.02em;
}

.wrap .saec-seo-title .description{
	margin:6px 0 0;
	color: rgba(15,23,42,.70);
	font-size: 13px;
	max-width: 840px;
}

.saec-seo-badges{
	display:flex;
	flex-wrap:wrap;
	gap:8px;
	justify-content:flex-end;
}

.saec-seo-badges .badge{
	display:inline-flex;
	align-items:center;
	gap:6px;
	padding:6px 10px;
	border-radius: 999px;
	background: rgba(255,255,255,.82);
	border: 1px solid var(--saec-seo-border);
	box-shadow: 0 6px 14px rgba(2,6,23,.06);
	font-size:12px;
	color: rgba(15,23,42,.75);
}

.saec-seo-badges .badge strong{
	color: rgba(15,23,42,.88);
	font-weight: 700;
}

.saec-seo-shell{
	display:grid;
	grid-template-columns: 260px 1fr;
	gap: 18px;
	align-items:start;
}

.saec-seo-tabs{
	position: sticky;
	top: 34px;
	align-self:start;
	padding: 14px;
	background: rgba(255,255,255,.86);
	backdrop-filter: blur(8px);
	border: 1px solid var(--saec-seo-border);
	border-radius: var(--saec-seo-radius);
	box-shadow: var(--saec-seo-shadow-soft);
}

.saec-seo-tabs .tab{
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:10px;
	padding: 10px 12px;
	margin: 0 0 6px;
	text-decoration:none;
	border-radius: 12px;
	border: 1px solid transparent;
	color: rgba(15,23,42,.82);
	background: transparent;
	transition: background .12s ease, border-color .12s ease, transform .12s ease;
}

.saec-seo-tabs .tab:hover{
	background: rgba(30,77,255,.08);
	border-color: rgba(30,77,255,.18);
}

.saec-seo-tabs .tab.active{
	background: rgba(30,77,255,.12);
	border-color: rgba(30,77,255,.26);
	box-shadow: 0 10px 18px rgba(30,77,255,.10);
}

.saec-seo-tabs .tab .pill{
	font-size:11px;
	padding: 2px 8px;
	border-radius: 999px;
	border: 1px solid var(--saec-seo-border);
	background: rgba(255,255,255,.90);
	color: rgba(15,23,42,.68);
}

.saec-seo-tabs .tab.locked{
	opacity: .55;
}

.saec-seo-panel{
	background: var(--saec-seo-card);
	border: 1px solid var(--saec-seo-border);
	border-radius: var(--saec-seo-radius);
	box-shadow: var(--saec-seo-shadow);
	padding: 18px;
	min-height: 520px;
}

.saec-seo-two-col{
	display:grid;
	grid-template-columns: 1.35fr .65fr;
	gap: 16px;
}

.saec-seo-two-col .card,
.saec-seo-panel .card{
	background: rgba(255,255,255,.92);
	border: 1px solid var(--saec-seo-border);
	border-radius: var(--saec-seo-radius-sm);
	box-shadow: 0 10px 20px rgba(2,6,23,.06);
	padding: 14px 14px 12px;
	margin: 0 0 14px;
}

.saec-seo-panel h2, .saec-seo-panel h3{
	letter-spacing: -0.01em;
}

.saec-seo-panel h2{
	font-size: 18px;
	margin: 0 0 10px;
}

.saec-seo-panel h3{
	font-size: 14px;
	margin: 0 0 8px;
	color: rgba(15,23,42,.86);
}

.saec-seo-panel .description{
	color: rgba(15,23,42,.65);
}

.saec-seo-panel input[type="text"],
.saec-seo-panel input[type="number"],
.saec-seo-panel input[type="url"],
.saec-seo-panel textarea,
.saec-seo-panel select{
	border-radius: 12px;
	border-color: var(--saec-seo-border-2);
	padding: 8px 10px;
}

.saec-seo-panel .button.button-primary{
	border-radius: 12px;
	box-shadow: 0 10px 18px rgba(30,77,255,.18);
}

.saec-seo-panel .button{
	border-radius: 12px;
}

.saec-seo-panel table.widefat{
	border-radius: 12px;
	overflow:hidden;
	border: 1px solid var(--saec-seo-border);
}

.saec-seo-panel table.widefat thead th{
	background: rgba(15,23,42,.03);
	border-bottom: 1px solid var(--saec-seo-border);
}

.saec-seo-panel table.widefat tbody tr:nth-child(odd){
	background: rgba(15,23,42,.015);
}

/* Promo card (shown only when SAEC SEO is NOT detected) */
.saec-seo-promo-card{
	margin: 10px 0 0;
	padding: 14px;
	border-radius: 14px;
	background: rgba(255,255,255,.86);
	border: 1px solid rgba(30,77,255,.20);
	box-shadow: 0 10px 18px rgba(2,6,23,.06);
}
.saec-seo-promo-card__title{
	margin: 0 0 6px;
	font-size: 14px;
}
.saec-seo-promo-card__actions{
	display:flex;
	gap:8px;
	flex-wrap:wrap;
	margin-top:10px;
}

/* Responsive */
@media (max-width: 1100px){
	.saec-seo-shell{ grid-template-columns: 1fr; }
	.saec-seo-tabs{ position: relative; top:auto; }
	.saec-seo-two-col{ grid-template-columns: 1fr; }
}

/* Help tab layout */
.saec-seo-help-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start}
.saec-seo-help-body{border:1px solid rgba(0,0,0,.08);border-radius:14px;padding:18px;background:#fff}
.saec-seo-help-body h3{margin:0 0 8px;font-size:16px;line-height:1.3}
.saec-seo-help-body p{margin:0 0 10px;color:#4b5563;line-height:1.6}
.saec-seo-help-body ul{margin:0 0 10px;padding-left:18px;color:#374151;line-height:1.7}
.saec-seo-help-card{border:1px solid rgba(0,0,0,.08);border-radius:14px;padding:16px;background:linear-gradient(180deg,#ffffff,#fafafa)}
.saec-seo-help-card .badge{display:inline-block;padding:4px 10px;border-radius:999px;background:#111827;color:#fff;font-size:11px;font-weight:700;letter-spacing:.02em}
@media (max-width: 960px){.saec-seo-help-grid{grid-template-columns:1fr}}
/* ===== SAEC SEO - Sitemap tab layout (2026-01) ===== */
.saec-seo-layout{max-width:1200px}
.saec-seo-grid{display:grid;gap:16px}
.saec-seo-grid--2{grid-template-columns: 1.4fr 1fr}
.saec-seo-grid--tight{gap:10px}
@media (max-width: 1100px){
  .saec-seo-grid--2{grid-template-columns:1fr}
}
.saec-seo-card{
  background: #fff;
  border:1px solid rgba(0,0,0,.06);
  border-radius:14px;
  padding:16px;
  box-shadow: 0 1px 2px rgba(0,0,0,.04);
}
.saec-seo-card__title{margin:0 0 8px 0;font-size:18px;line-height:1.3}
.saec-seo-card__subtitle{margin:0 0 10px 0;font-size:14px;line-height:1.3}
.saec-seo-muted{color:rgba(0,0,0,.62);margin:8px 0}
.saec-seo-hr{border:0;border-top:1px solid rgba(0,0,0,.08);margin:14px 0}
.saec-seo-kv{display:grid;grid-template-columns: 140px 1fr;gap:10px;align-items:start;margin-top:10px}
@media (max-width: 600px){ .saec-seo-kv{grid-template-columns:1fr} }
.saec-seo-kv__k{font-weight:600}
.saec-seo-kv__v a{word-break:break-all}
.saec-seo-actions{display:flex;gap:10px;align-items:center;margin-top:12px}
.saec-seo-actions--stack{flex-direction:column;align-items:flex-start}
.saec-seo-inline-form{display:inline-flex;gap:10px;align-items:center;margin:0}
.saec-seo-form .saec-seo-field{margin:12px 0}
.saec-seo-field__label{font-weight:600;display:block;margin:0 0 6px 0}
.saec-seo-field__help{margin:6px 0 0 0;color:rgba(0,0,0,.62)}
.saec-seo-checklist{display:flex;flex-direction:column;gap:6px;margin:6px 0 0 0}
.saec-seo-checklist__item{display:flex;gap:8px;align-items:flex-start}
.saec-seo-checklist__item code{font-size:12px}
.saec-seo-list{margin:0 0 0 18px}
.saec-seo-list li{margin:6px 0}