/*
 * AI-SiteArk admin styles — token-driven design system.
 *
 * Copyright (c) 2026 AtoZ INFOWAY INC.
 * Licensed under the GNU General Public License, version 2 or later.
 */

:root {
	--aisv-accent:        #0d9488;
	--aisv-accent-strong: #0f766e;
	--aisv-accent-soft:   #ecfdf5;
	--aisv-accent-softer: #f0fdfa;

	--aisv-surface:       #ffffff;
	--aisv-surface-2:     #f7f8fa;
	--aisv-surface-3:     #f0f1f4;
	--aisv-border:        #e3e5e8;
	--aisv-border-strong: #d2d5db;
	--aisv-text:          #1d2327;
	--aisv-text-2:        #50575e;
	--aisv-text-3:        #787c82;

	--aisv-danger:        #d63638;
	--aisv-danger-soft:   #fcebec;
	--aisv-success:       #00a32a;
	--aisv-warn:          #8a6116;
	--aisv-warn-bg:       #fcf3e3;

	--aisv-s1: 4px;
	--aisv-s2: 8px;
	--aisv-s3: 12px;
	--aisv-s4: 16px;
	--aisv-s5: 20px;
	--aisv-s6: 24px;
	--aisv-s8: 32px;

	--aisv-r-sm:   6px;
	--aisv-r:      8px;
	--aisv-r-lg:   12px;
	--aisv-r-pill: 999px;

	--aisv-shadow-sm: 0 1px 2px rgba( 16, 24, 40, 0.04 ), 0 1px 3px rgba( 16, 24, 40, 0.04 );
	--aisv-shadow-md: 0 1px 3px rgba( 16, 24, 40, 0.05 ), 0 4px 12px rgba( 16, 24, 40, 0.06 );

	--aisv-fs-xs:  11px;
	--aisv-fs-sm:  12px;
	--aisv-fs-base:13px;
	--aisv-fs-md:  14px;
	--aisv-fs-lg:  16px;
	--aisv-fs-xl:  19px;
	--aisv-fs-2xl: 23px;
}

.aisv-wrap { max-width: 1180px; }
.aisv-page { margin-top: var(--aisv-s4); }

.aisv-page__head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: var(--aisv-s3);
	justify-content: space-between;
	margin-bottom: var(--aisv-s4);
}
.aisv-page__title {
	margin: 0;
	font-size: var(--aisv-fs-2xl);
	font-weight: 700;
	line-height: 1.2;
	color: var(--aisv-text);
	letter-spacing: -0.01em;
}
.aisv-page__sub { margin: var(--aisv-s1) 0 0; color: var(--aisv-text-2); font-size: var(--aisv-fs-md); }
.aisv-page__actions { display: flex; flex-wrap: wrap; gap: var(--aisv-s2); align-items: center; }

.aisv-wrap hr.wp-header-end {
	border: 0;
	border-top: 1px solid var(--aisv-border);
	margin: var(--aisv-s2) 0 var(--aisv-s5);
	height: 0;
}

/* Cards */
.aisv-card {
	background: var(--aisv-surface);
	border: 1px solid var(--aisv-border);
	border-radius: var(--aisv-r-lg);
	padding: var(--aisv-s5);
	margin: 0 0 var(--aisv-s4);
	box-shadow: var(--aisv-shadow-sm);
}
.aisv-card__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--aisv-s3);
	margin-bottom: var(--aisv-s4);
	padding-bottom: var(--aisv-s3);
	border-bottom: 1px solid var(--aisv-border);
}
.aisv-card__head h2 {
	margin: 0;
	display: flex;
	align-items: center;
	gap: var(--aisv-s2);
	font-size: var(--aisv-fs-md);
	font-weight: 600;
	color: var(--aisv-text);
}
.aisv-card__head h2 .dashicons { color: var(--aisv-accent); }
.aisv-card .description { color: var(--aisv-text-2); }

/* Buttons (layered on WP .button) */
.aisv-wrap .button-primary {
	background: var(--aisv-accent);
	border-color: var(--aisv-accent);
	color: #fff;
}
.aisv-wrap .button-primary:hover { background: var(--aisv-accent-strong); border-color: var(--aisv-accent-strong); }
.aisv-btn--danger { color: var(--aisv-danger) !important; border-color: var(--aisv-danger) !important; background: var(--aisv-surface) !important; }
.aisv-btn--danger:hover { background: var(--aisv-danger-soft) !important; }

/* Badges */
.aisv-badge {
	display: inline-block;
	padding: 2px 10px;
	border-radius: var(--aisv-r-pill);
	font-size: var(--aisv-fs-sm);
	font-weight: 600;
}
.aisv-badge--on { background: #e6f6ea; color: #00450f; }
.aisv-badge--off { background: var(--aisv-surface-3); color: var(--aisv-text-2); }
.aisv-badge--pro { background: var(--aisv-warn-bg); color: var(--aisv-warn); }
.aisv-badge--free { background: var(--aisv-accent-soft); color: var(--aisv-accent-strong); }
.aisv-badge--pro .dashicons {
	font-size: 14px;
	width: 14px;
	height: 14px;
	line-height: 1.35;
	vertical-align: text-bottom;
}

/* Version chip beside the page title (matches the AtoZ family look) */
.aisv-ver {
	display: inline-block;
	vertical-align: middle;
	margin-left: 10px;
	padding: 2px 9px;
	border-radius: var(--aisv-r-pill);
	background: var(--aisv-accent-soft);
	color: var(--aisv-accent-strong);
	font-size: var(--aisv-fs-sm);
	font-weight: 600;
	letter-spacing: 0;
}

/* Upgrade link next to the Free badge */
.aisv-upgrade {
	font-size: var(--aisv-fs-sm);
	font-weight: 600;
	text-decoration: none;
	color: var(--aisv-accent-strong);
}
.aisv-upgrade:hover { text-decoration: underline; }

/* Settings tabs — grouped, URL-driven (matches the AtoZ family look) */
.aisv-settings-nav {
	background: var(--aisv-surface);
	border: 1px solid var(--aisv-border);
	border-radius: var(--aisv-r-lg);
	box-shadow: var(--aisv-shadow-sm);
	margin: var(--aisv-s4) 0 var(--aisv-s5);
	overflow: hidden;
}
.aisv-nav-sections {
	display: flex;
	flex-wrap: wrap;
	gap: 2px;
	margin: 0;
	padding: var(--aisv-s2);
	list-style: none;
	background: var(--aisv-surface-2);
}
.aisv-nav-sections li { margin: 0; }
.aisv-nav-section {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: var(--aisv-s2) var(--aisv-s3);
	border-radius: var(--aisv-r-sm);
	color: var(--aisv-text-2);
	font-size: var(--aisv-fs-md);
	font-weight: 600;
	text-decoration: none;
	line-height: 1.4;
	transition: background .15s ease, color .15s ease, box-shadow .15s ease;
}
.aisv-nav-section .dashicons { font-size: 16px; width: 16px; height: 16px; opacity: .7; }
.aisv-nav-section:hover,
.aisv-nav-section:focus { color: var(--aisv-text); background: var(--aisv-surface); }
.aisv-nav-section.is-active {
	background: var(--aisv-surface);
	color: var(--aisv-accent-strong);
	box-shadow: inset 0 0 0 1px var(--aisv-accent);
}
.aisv-nav-section.is-active .dashicons { opacity: 1; color: var(--aisv-accent); }
.aisv-nav-pro { margin-left: 2px; }
@media screen and (max-width: 782px) {
	.aisv-nav-sections { flex-direction: column; }
	.aisv-nav-section { width: 100%; justify-content: flex-start; }
}

/* Pro-locked settings section (shown in place of Pro controls on Free) */
.aisv-locked__lead {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	color: var(--aisv-text-2);
	max-width: 640px;
}
.aisv-locked__lead .dashicons { color: var(--aisv-warn); flex: 0 0 auto; margin-top: 2px; }

/* Filter/inline form bar */
.aisv-filter-bar {
	display: flex;
	flex-wrap: wrap;
	gap: var(--aisv-s2);
	align-items: center;
	background: var(--aisv-surface);
	border: 1px solid var(--aisv-border);
	border-radius: var(--aisv-r-lg);
	padding: var(--aisv-s3) var(--aisv-s4);
	margin: 0 0 var(--aisv-s4);
}

/* Table card */
.aisv-table-card {
	background: var(--aisv-surface);
	border: 1px solid var(--aisv-border);
	border-radius: var(--aisv-r-lg);
	box-shadow: var(--aisv-shadow-sm);
	overflow: hidden;
}
.aisv-table-card > table { border: 0; margin: 0; }

/* Progress bar (backup/restore runner) */
.aisv-progress {
	height: 14px;
	background: var(--aisv-surface-3);
	border-radius: var(--aisv-r-pill);
	overflow: hidden;
	margin: var(--aisv-s3) 0 var(--aisv-s2);
}
.aisv-progress__bar {
	height: 100%;
	width: 0;
	background: linear-gradient( 90deg, var(--aisv-accent) 0%, var(--aisv-accent-strong) 100% );
	transition: width .3s ease;
}
.aisv-progress__label { font-size: var(--aisv-fs-sm); color: var(--aisv-text-2); }
.aisv-log {
	margin-top: var(--aisv-s3);
	max-height: 220px;
	overflow: auto;
	background: #0f172a;
	color: #cbd5e1;
	border-radius: var(--aisv-r);
	padding: var(--aisv-s3);
	font: 12px/1.6 ui-monospace, SFMono-Regular, Menlo, monospace;
	white-space: pre-wrap;
}

/* Empty state */
.aisv-empty {
	background: var(--aisv-surface);
	border: 1px dashed var(--aisv-border-strong);
	border-radius: var(--aisv-r-lg);
	padding: var(--aisv-s8);
	text-align: center;
	color: var(--aisv-text-2);
}
.aisv-empty__lead { font-size: var(--aisv-fs-lg); font-weight: 600; color: var(--aisv-text); margin: 0 0 var(--aisv-s2); }

/* Notice for the in-development state */
.aisv-soon {
	display: inline-block;
	background: var(--aisv-warn-bg);
	color: var(--aisv-warn);
	border-radius: var(--aisv-r-pill);
	padding: 2px 10px;
	font-size: var(--aisv-fs-xs);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

/* Drag-and-drop upload zone (restore page). */
.aisv-drop {
	display: flex;
	gap: 10px;
	align-items: center;
	flex-wrap: wrap;
	border: 2px dashed var(--aisv-border-strong);
	border-radius: var(--aisv-r);
	padding: 16px;
	background: var(--aisv-accent-softer);
	transition: border-color .15s ease, background .15s ease;
}
.aisv-drop .dashicons {
	color: var(--aisv-accent);
}
.aisv-drop.is-dragover {
	border-color: var(--aisv-accent);
	background: var(--aisv-accent-soft);
}

/* What's New — per-version release history */
.aisv-whatsnew {
	display: flex;
	flex-direction: column;
	gap: var(--aisv-s5);
	max-width: 860px;
}
.aisv-whatsnew__release { position: relative; }
.aisv-whatsnew__head { align-items: baseline; }
.aisv-whatsnew__ver {
	font-size: var(--aisv-fs-lg);
	font-weight: 700;
	color: var(--aisv-text);
}
.aisv-whatsnew__badge {
	margin-left: var(--aisv-s2);
	display: inline-block;
	padding: 2px 9px;
	border-radius: var(--aisv-r-pill);
	background: #e6f6ea;
	color: #00450f;
	font-size: var(--aisv-fs-xs);
	font-weight: 700;
	letter-spacing: 0.02em;
	vertical-align: middle;
}
.aisv-whatsnew__date {
	color: var(--aisv-text-3);
	font-size: var(--aisv-fs-sm);
	white-space: nowrap;
}
.aisv-whatsnew__headline {
	margin: 0 0 var(--aisv-s4);
	color: var(--aisv-text-2);
	font-size: var(--aisv-fs-md);
	font-weight: 600;
}
.aisv-whatsnew__items {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: var(--aisv-s4);
}
.aisv-whatsnew__items li {
	display: flex;
	gap: var(--aisv-s3);
	align-items: flex-start;
	margin: 0;
}
.aisv-whatsnew__dot {
	flex: 0 0 auto;
	width: 8px;
	height: 8px;
	margin-top: 6px;
	border-radius: 50%;
	background: var(--aisv-accent);
}
.aisv-whatsnew__items li p {
	margin: 2px 0 0;
	color: var(--aisv-text-2);
}
.aisv-whatsnew__pro {
	margin-left: var(--aisv-s2);
	display: inline-block;
	padding: 1px 7px;
	border-radius: var(--aisv-r-pill);
	background: var(--aisv-warn-bg);
	color: var(--aisv-warn);
	font-size: var(--aisv-fs-xs);
	font-weight: 700;
	vertical-align: middle;
}

/* Custom confirm modal (replaces the browser's native confirm dialog) */
.aisv-modal-overlay {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--aisv-s5);
	background: rgba( 15, 23, 26, 0.55 );
	animation: aisv-modal-fade 0.12s ease-out;
}
.aisv-modal {
	width: 100%;
	max-width: 460px;
	background: var(--aisv-surface);
	color: var(--aisv-text);
	border: 1px solid var(--aisv-border);
	border-radius: var(--aisv-r-lg, 10px);
	box-shadow: 0 12px 40px rgba( 0, 0, 0, 0.28 );
	overflow: hidden;
	animation: aisv-modal-pop 0.12s ease-out;
}
.aisv-modal__body {
	padding: var(--aisv-s6) var(--aisv-s6) var(--aisv-s5);
	font-size: var(--aisv-fs-sm, 14px);
	line-height: 1.55;
	color: var(--aisv-text);
}
.aisv-modal__actions {
	display: flex;
	justify-content: flex-end;
	gap: var(--aisv-s2);
	padding: var(--aisv-s4) var(--aisv-s6);
	background: var(--aisv-surface-2);
	border-top: 1px solid var(--aisv-border);
}
.aisv-modal__btn { min-width: 92px; text-align: center; justify-content: center; }
@keyframes aisv-modal-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes aisv-modal-pop { from { opacity: 0; transform: translateY( 8px ) scale( 0.98 ); } to { opacity: 1; transform: none; } }