/**
 * AI-SiteArk — modern enterprise admin styles.
 *
 * Design tokens and component classes matching the modern SaaS design system:
 * - Enterprise Indigo/Royal Purple header banner with gradient and soft drop shadow
 * - Top-level pill navigation tabs with active indicator and Dashicons
 * - Crisp, elevated cards with subtle borders and shadows
 * - Readiness score circular indicator and quick maintenance action cards
 * - Modernized WordPress form tables, inputs, buttons, badges, and progress bars
 *
 * Copyright (c) 2026 AtoZ INFOWAY INC. All rights reserved. Proprietary.
 */

/* ─────────────────────────────────────────────────────────────────────
   1. Design tokens
   ───────────────────────────────────────────────────────────────────── */
:root {
	/* Brand accent (Indigo / Enterprise Royal Purple) */
	--aisv-accent:        #4f46e5;
	--aisv-accent-strong: #4338ca;
	--aisv-accent-soft:   #eef2ff;
	--aisv-accent-softer: #f5f3ff;

	/* Enterprise Header Gradient */
	--aisv-header-grad:   linear-gradient(135deg, #1e1b4b 0%, #312e81 45%, #4338ca 100%);

	/* Neutral surfaces & text */
	--aisv-surface:       #ffffff;
	--aisv-surface-2:     #f8fafc;
	--aisv-surface-3:     #f1f5f9;
	--aisv-border:        #e2e8f0;
	--aisv-border-strong: #cbd5e1;
	--aisv-text:          #0f172a;
	--aisv-text-2:        #475569;
	--aisv-text-3:        #94a3b8;

	/* Status hues */
	--aisv-danger:        #ef4444;
	--aisv-danger-soft:   #fef2f2;
	--aisv-success:       #10b981;
	--aisv-success-soft:  #ecfdf5;
	--aisv-warning:       #f59e0b;
	--aisv-warning-soft:  #fffbeb;
	--aisv-warn:          #d97706;
	--aisv-warn-bg:       #fffbeb;
	--aisv-pro:           #4f46e5;

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

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

	/* Elevation */
	--aisv-shadow-sm: 0 1px 2px rgba( 15, 23, 42, 0.05 );
	--aisv-shadow-md: 0 4px 6px -1px rgba( 15, 23, 42, 0.07 ), 0 2px 4px -2px rgba( 15, 23, 42, 0.05 );
	--aisv-shadow-lg: 0 10px 15px -3px rgba( 15, 23, 42, 0.08 ), 0 4px 6px -4px rgba( 15, 23, 42, 0.04 );
	--aisv-shadow-banner: 0 10px 25px -5px rgba( 49, 46, 129, 0.25 ), 0 8px 10px -6px rgba( 49, 46, 129, 0.15 );

	/* Type scale */
	--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;
}

/* ─────────────────────────────────────────────────────────────────────
   2. Page container & Top Header Banner
   ───────────────────────────────────────────────────────────────────── */
.aisv-wrap {
	--aisv-focus: 0 0 0 2px var(--aisv-accent-soft), 0 0 0 4px rgba( 79, 70, 229, 0.35 );
	max-width: 1240px;
	margin: 16px 20px 40px 0;
	box-sizing: border-box;
}

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

.aisv-page {
	margin-top: var(--aisv-s2);
}

/* Enterprise Header Banner */
.aisv-page__head {
	background: var(--aisv-header-grad) !important;
	color: #ffffff !important;
	padding: 22px 28px !important;
	border-radius: var(--aisv-r-lg) !important;
	display: flex !important;
	flex-wrap: wrap !important;
	align-items: center !important;
	gap: var(--aisv-s4) !important;
	justify-content: space-between !important;
	margin-bottom: var(--aisv-s5) !important;
	box-shadow: var(--aisv-shadow-banner) !important;
}

.aisv-page__head .aisv-page__title-block {
	display: flex !important;
	align-items: center !important;
	gap: 14px !important;
	min-width: 0 !important;
}

.aisv-page__icon {
	font-size: 32px !important;
	width: 32px !important;
	height: 32px !important;
	color: #c7d2fe !important;
	line-height: 1 !important;
	flex-shrink: 0 !important;
}

.aisv-page__title {
	margin: 0 !important;
	font-size: 22px !important;
	font-weight: 700 !important;
	line-height: 1.2 !important;
	color: #ffffff !important;
	letter-spacing: -0.02em !important;
	display: flex !important;
	align-items: center !important;
	gap: 10px !important;
	flex-wrap: wrap !important;
}

.aisv-page__sub {
	margin: 4px 0 0 !important;
	color: rgba(255, 255, 255, 0.85) !important;
	font-size: 12px !important;
	letter-spacing: 0.02em !important;
}

.aisv-page__actions {
	display: flex !important;
	flex-wrap: wrap !important;
	gap: 10px !important;
	align-items: center !important;
}

/* Header Action Buttons */
.aisv-btn--header-white {
	background: #ffffff !important;
	color: #1e1b4b !important;
	border: 1px solid #ffffff !important;
	font-weight: 600 !important;
	font-size: 13px !important;
	padding: 8px 16px !important;
	border-radius: var(--aisv-r-sm) !important;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1) !important;
	transition: all 0.2s ease !important;
	display: inline-flex !important;
	align-items: center !important;
	gap: 6px !important;
	cursor: pointer !important;
	text-decoration: none !important;
	line-height: 1.4 !important;
}

.aisv-btn--header-white:hover {
	background: #f8fafc !important;
	transform: translateY(-1px) !important;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15) !important;
	color: #1e1b4b !important;
}

.aisv-btn--header-white .dashicons {
	color: #1e1b4b !important;
	font-size: 16px !important;
	width: 16px !important;
	height: 16px !important;
}

.aisv-btn--header-glass {
	background: rgba(255, 255, 255, 0.15) !important;
	color: #ffffff !important;
	border: 1px solid rgba(255, 255, 255, 0.35) !important;
	font-weight: 600 !important;
	font-size: 13px !important;
	padding: 8px 16px !important;
	border-radius: var(--aisv-r-sm) !important;
	display: inline-flex !important;
	align-items: center !important;
	gap: 6px !important;
	backdrop-filter: blur(4px) !important;
	transition: all 0.2s ease !important;
	cursor: pointer !important;
	text-decoration: none !important;
	line-height: 1.4 !important;
}

.aisv-btn--header-glass:hover {
	background: rgba(255, 255, 255, 0.25) !important;
	color: #ffffff !important;
	transform: translateY(-1px) !important;
}

.aisv-btn--header-glass .dashicons {
	color: #ffffff !important;
	font-size: 16px !important;
	width: 16px !important;
	height: 16px !important;
}

/* ─────────────────────────────────────────────────────────────────────
   3. Navigation Tabs (.aisv-tabs & .aiopt-tabs)
   ───────────────────────────────────────────────────────────────────── */
.aisv-tabs,
.aiopt-tabs {
	display: flex !important;
	gap: 4px !important;
	background: var(--aisv-surface) !important;
	padding: 6px !important;
	border-radius: var(--aisv-r-lg) !important;
	border: 1px solid var(--aisv-border) !important;
	margin-bottom: var(--aisv-s5) !important;
	overflow-x: auto !important;
	box-shadow: var(--aisv-shadow-sm) !important;
	scrollbar-width: thin !important;
}

.aisv-tabs a,
.aiopt-tabs a {
	display: inline-flex !important;
	align-items: center !important;
	gap: 7px !important;
	padding: 9px 15px !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	color: var(--aisv-text-2) !important;
	text-decoration: none !important;
	border-radius: var(--aisv-r-sm) !important;
	transition: all 0.15s ease-in-out !important;
	white-space: nowrap !important;
	border: none !important;
	background: transparent !important;
}

.aisv-tabs a .dashicons,
.aiopt-tabs a .dashicons {
	font-size: 16px !important;
	width: 16px !important;
	height: 16px !important;
	color: var(--aisv-text-3) !important;
	transition: color 0.15s ease !important;
}

.aisv-tabs a:hover,
.aiopt-tabs a:hover {
	color: var(--aisv-accent) !important;
	background: var(--aisv-accent-soft) !important;
}

.aisv-tabs a:hover .dashicons,
.aiopt-tabs a:hover .dashicons {
	color: var(--aisv-accent) !important;
}

.aisv-tabs a.is-active,
.aisv-tabs a.active,
.aiopt-tabs a.is-active,
.aiopt-tabs a.active {
	background: var(--aisv-accent) !important;
	color: #ffffff !important;
	box-shadow: 0 2px 8px rgba( 79, 70, 229, 0.35 ) !important;
}

.aisv-tabs a.is-active .dashicons,
.aisv-tabs a.active .dashicons,
.aiopt-tabs a.is-active .dashicons,
.aiopt-tabs a.active .dashicons {
	color: #ffffff !important;
}

.aisv-tabs a.is-active .aisv-badge--pro,
.aisv-tabs a.active .aisv-badge--pro {
	background: rgba( 255, 255, 255, 0.25 ) !important;
	color: #ffffff !important;
	border-color: rgba( 255, 255, 255, 0.4 ) !important;
}

/* ─────────────────────────────────────────────────────────────────────
   4. Settings Sub-Navigation (.aisv-settings-nav)
   ───────────────────────────────────────────────────────────────────── */
.aisv-settings-nav {
	background: var(--aisv-surface) !important;
	border: 1px solid var(--aisv-border) !important;
	border-radius: var(--aisv-r-lg) !important;
	box-shadow: var(--aisv-shadow-sm) !important;
	margin: 0 0 var(--aisv-s5) !important;
	padding: 6px !important;
	overflow: hidden !important;
}

.aisv-nav-sections {
	display: flex !important;
	flex-wrap: wrap !important;
	gap: 4px !important;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
	background: transparent !important;
}

.aisv-nav-sections li {
	margin: 0 !important;
}

.aisv-nav-section {
	display: inline-flex !important;
	align-items: center !important;
	gap: 6px !important;
	padding: 8px 14px !important;
	border-radius: var(--aisv-r-sm) !important;
	color: var(--aisv-text-2) !important;
	font-size: var(--aisv-fs-base) !important;
	font-weight: 600 !important;
	text-decoration: none !important;
	line-height: 1.4 !important;
	transition: all .15s ease !important;
}

.aisv-nav-section .dashicons {
	font-size: 16px !important;
	width: 16px !important;
	height: 16px !important;
	color: var(--aisv-text-3) !important;
}

.aisv-nav-section:hover,
.aisv-nav-section:focus {
	color: var(--aisv-accent) !important;
	background: var(--aisv-accent-soft) !important;
}

.aisv-nav-section:hover .dashicons {
	color: var(--aisv-accent) !important;
}

.aisv-nav-section.is-active {
	background: var(--aisv-accent) !important;
	color: #ffffff !important;
	box-shadow: 0 2px 6px rgba( 79, 70, 229, 0.3 ) !important;
}

.aisv-nav-section.is-active .dashicons {
	color: #ffffff !important;
}

.aisv-nav-pro {
	margin-left: 2px !important;
}

/* ─────────────────────────────────────────────────────────────────────
   5. Grids, Health Score Box & Quick Maintenance Actions
   ───────────────────────────────────────────────────────────────────── */
.aisv-grid-2,
.aiopt-grid-2 {
	display: grid !important;
	grid-template-columns: 2fr 1fr !important;
	gap: var(--aisv-s5) !important;
	margin-bottom: var(--aisv-s5) !important;
}

.aisv-grid-3,
.aiopt-grid-3 {
	display: grid !important;
	grid-template-columns: repeat( 3, 1fr ) !important;
	gap: var(--aisv-s5) !important;
	margin-bottom: var(--aisv-s5) !important;
}

.aisv-grid-col {
	display: flex !important;
	flex-direction: column !important;
	gap: var(--aisv-s5) !important;
}

/* Score Box & Performance Circle */
.aisv-score-box,
.aiopt-score-box {
	display: flex !important;
	align-items: center !important;
	gap: 20px !important;
	padding: 22px 24px !important;
	background: linear-gradient( 135deg, #f8fafc 0%, #eef2ff 100% ) !important;
	border-radius: var(--aisv-r-lg) !important;
	border: 1px solid #c7d2fe !important;
}

.aisv-score-circle,
.aiopt-score-circle {
	width: 76px !important;
	height: 76px !important;
	border-radius: 50% !important;
	background: var(--aisv-success) !important;
	color: #ffffff !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	font-size: 28px !important;
	font-weight: 800 !important;
	box-shadow: 0 4px 14px rgba( 16, 185, 129, 0.35 ) !important;
	flex-shrink: 0 !important;
	letter-spacing: -0.03em !important;
}

.aisv-score-info h3,
.aiopt-score-info h3 {
	margin: 0 0 6px 0 !important;
	font-size: 15px !important;
	font-weight: 700 !important;
	color: var(--aisv-text) !important;
}

.aisv-score-info p,
.aiopt-score-info p {
	margin: 0 !important;
	font-size: 13px !important;
	color: var(--aisv-text-2) !important;
	line-height: 1.5 !important;
}

/* Quick Maintenance Actions */
.aisv-actions-stack,
.aiopt-actions-stack {
	display: flex !important;
	flex-direction: column !important;
	gap: 12px !important;
}

.aisv-btn--action,
.aiopt-btn--action {
	width: 100% !important;
	box-sizing: border-box !important;
	justify-content: flex-start !important;
	padding: 11px 16px !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	border: 1px solid var(--aisv-border) !important;
	background: var(--aisv-surface) !important;
	color: var(--aisv-text) !important;
	border-radius: var(--aisv-r-sm) !important;
	transition: all 0.2s ease !important;
	text-decoration: none !important;
	display: inline-flex !important;
	align-items: center !important;
	gap: 8px !important;
	cursor: pointer !important;
	line-height: 1.4 !important;
}

.aisv-btn--action:hover,
.aiopt-btn--action:hover {
	background: var(--aisv-surface-2) !important;
	border-color: var(--aisv-border-strong) !important;
	color: var(--aisv-text) !important;
	transform: translateY( -1px ) !important;
	box-shadow: var(--aisv-shadow-sm) !important;
}

.aisv-btn--action .dashicons,
.aiopt-btn--action .dashicons {
	color: var(--aisv-accent) !important;
	font-size: 18px !important;
	width: 18px !important;
	height: 18px !important;
}

.aisv-btn--action.aisv-btn--primary,
.aiopt-btn--action.aiopt-btn--primary {
	background: var(--aisv-accent) !important;
	color: #ffffff !important;
	border-color: var(--aisv-accent) !important;
	box-shadow: 0 2px 6px rgba( 79, 70, 229, 0.3 ) !important;
	justify-content: center !important;
}

.aisv-btn--action.aisv-btn--primary:hover,
.aiopt-btn--action.aiopt-btn--primary:hover {
	background: var(--aisv-accent-strong) !important;
	border-color: var(--aisv-accent-strong) !important;
	box-shadow: 0 4px 10px rgba( 79, 70, 229, 0.4 ) !important;
	color: #ffffff !important;
}

.aisv-btn--action.aisv-btn--primary .dashicons,
.aiopt-btn--action.aiopt-btn--primary .dashicons {
	color: #ffffff !important;
}

/* ─────────────────────────────────────────────────────────────────────
   6. Cards & Headings
   ───────────────────────────────────────────────────────────────────── */
.aisv-card,
.aiopt-card {
	background: var(--aisv-surface) !important;
	border: 1px solid var(--aisv-border) !important;
	border-radius: var(--aisv-r-lg) !important;
	padding: 24px !important;
	margin-bottom: var(--aisv-s5) !important;
	box-shadow: var(--aisv-shadow-sm) !important;
	transition: box-shadow 0.2s ease, border-color 0.2s ease !important;
}

.aisv-card:hover,
.aiopt-card:hover {
	box-shadow: var(--aisv-shadow-md) !important;
}

.aisv-card__head,
.aiopt-card__head {
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	gap: var(--aisv-s4) !important;
	margin-bottom: var(--aisv-s4) !important;
	padding-bottom: var(--aisv-s3) !important;
	border-bottom: 1px solid var(--aisv-surface-3) !important;
}

.aisv-card__head h2,
.aiopt-card__head h2 {
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	display: flex !important;
	align-items: center !important;
	gap: var(--aisv-s2) !important;
	font-size: 16px !important;
	font-weight: 700 !important;
	color: var(--aisv-text) !important;
}

.aisv-card__head h2 .dashicons,
.aiopt-card__head h2 .dashicons {
	color: var(--aisv-accent) !important;
	font-size: 19px !important;
	width: 19px !important;
	height: 19px !important;
}

.aisv-card .description {
	color: var(--aisv-text-2) !important;
	font-size: 13px !important;
	line-height: 1.5 !important;
}

/* Pro-locked section */
.aisv-locked {
	background: linear-gradient(135deg, #ffffff 0%, #fffcf5 100%) !important;
	border-left: 4px solid var(--aisv-warning) !important;
}

.aisv-locked__lead {
	display: flex !important;
	align-items: flex-start !important;
	gap: 8px !important;
	color: var(--aisv-text-2) !important;
	max-width: 640px !important;
	font-size: 13px !important;
}

.aisv-locked__lead .dashicons {
	color: var(--aisv-warn) !important;
	flex: 0 0 auto !important;
	margin-top: 2px !important;
}

/* ─────────────────────────────────────────────────────────────────────
   7. Buttons
   ───────────────────────────────────────────────────────────────────── */
.aisv-wrap .button,
.aisv-wrap .button-secondary,
.aisv-wrap .button-primary {
	height: 36px !important;
	line-height: 34px !important;
	border-radius: var(--aisv-r) !important;
	font-size: var(--aisv-fs-base) !important;
	font-weight: 500 !important;
	padding: 0 14px !important;
	border: 1px solid var(--aisv-border-strong) !important;
	background: var(--aisv-surface) !important;
	color: var(--aisv-text) !important;
	box-shadow: none !important;
	text-shadow: none !important;
	transition: background .14s ease, border-color .14s ease, color .14s ease, box-shadow .14s ease !important;
	display: inline-flex !important;
	align-items: center !important;
	gap: 6px !important;
	text-decoration: none !important;
	cursor: pointer !important;
}

.aisv-wrap .button:hover,
.aisv-wrap .button-secondary:hover {
	background: var(--aisv-surface-2) !important;
	border-color: var(--aisv-text-3) !important;
	color: var(--aisv-text) !important;
}

.aisv-wrap .button:active {
	transform: translateY( 1px ) !important;
}

.aisv-wrap .button-primary,
.aisv-btn--primary {
	background: var(--aisv-accent) !important;
	border-color: var(--aisv-accent) !important;
	color: #ffffff !important;
	font-weight: 600 !important;
	box-shadow: 0 2px 6px rgba( 79, 70, 229, 0.25 ) !important;
}

.aisv-wrap .button-primary:hover,
.aisv-btn--primary:hover {
	background: var(--aisv-accent-strong) !important;
	border-color: var(--aisv-accent-strong) !important;
	color: #ffffff !important;
	box-shadow: 0 4px 10px rgba( 79, 70, 229, 0.35 ) !important;
}

.aisv-wrap .button:focus,
.aisv-wrap .button-primary:focus {
	outline: none !important;
	box-shadow: var(--aisv-focus) !important;
	border-color: var(--aisv-accent) !important;
}

.aisv-wrap .button-small {
	height: 28px !important;
	line-height: 26px !important;
	padding: 0 10px !important;
	font-size: var(--aisv-fs-sm) !important;
	border-radius: var(--aisv-r-sm) !important;
}

.aisv-wrap .button-link {
	color: var(--aisv-accent) !important;
	text-decoration: none !important;
	font-weight: 500 !important;
}

.aisv-wrap .button-link:hover {
	color: var(--aisv-accent-strong) !important;
	text-decoration: underline !important;
}

.aisv-btn--danger,
.aisv-wrap .button-link-delete {
	color: var(--aisv-danger) !important;
	border-color: #fecaca !important;
	background: var(--aisv-danger-soft) !important;
	font-weight: 600 !important;
}

.aisv-btn--danger:hover,
.aisv-wrap .button-link-delete:hover {
	background: #fee2e2 !important;
	border-color: var(--aisv-danger) !important;
	color: #dc2626 !important;
}

/* ─────────────────────────────────────────────────────────────────────
   8. Badges & Chips
   ───────────────────────────────────────────────────────────────────── */
.aisv-badge,
.aiopt-badge {
	display: inline-block !important;
	padding: 2px 10px !important;
	border-radius: var(--aisv-r-pill) !important;
	font-size: var(--aisv-fs-xs) !important;
	font-weight: 700 !important;
	letter-spacing: 0.03em !important;
	text-transform: uppercase !important;
}

.aisv-badge--enterprise,
.aiopt-badge--enterprise {
	background: rgba(255, 255, 255, 0.2) !important;
	border: 1px solid rgba(255, 255, 255, 0.35) !important;
	color: #ffffff !important;
	padding: 2px 10px !important;
	font-size: 11px !important;
	font-weight: 700 !important;
	border-radius: var(--aisv-r-pill) !important;
	text-transform: uppercase !important;
	letter-spacing: 0.05em !important;
}

.aisv-badge--on,
.aisv-badge--success,
.aiopt-badge--success {
	background: var(--aisv-success-soft) !important;
	color: var(--aisv-success) !important;
	border: 1px solid #a7f3d0 !important;
}

.aisv-badge--off {
	background: var(--aisv-surface-3) !important;
	color: var(--aisv-text-2) !important;
	border: 1px solid var(--aisv-border) !important;
}

.aisv-badge--warning,
.aiopt-badge--warning {
	background: var(--aisv-warning-soft) !important;
	color: var(--aisv-warn) !important;
	border: 1px solid #fde68a !important;
}

.aisv-badge--pro,
.aiopt-badge--pro {
	background: var(--aisv-accent-soft) !important;
	color: var(--aisv-accent) !important;
	border: 1px solid #c7d2fe !important;
}

.aisv-badge--free,
.aiopt-badge--free {
	background: rgba(255, 255, 255, 0.2) !important;
	color: #ffffff !important;
	border: 1px solid rgba(255, 255, 255, 0.3) !important;
}

.aisv-badge--pro .dashicons {
	font-size: 14px !important;
	width: 14px !important;
	height: 14px !important;
	line-height: 1.35 !important;
	vertical-align: text-bottom !important;
}

.aisv-ver {
	display: inline-block !important;
	vertical-align: middle !important;
	margin-left: 10px !important;
	padding: 2px 9px !important;
	border-radius: var(--aisv-r-pill) !important;
	background: var(--aisv-accent-soft) !important;
	color: var(--aisv-accent-strong) !important;
	font-size: var(--aisv-fs-sm) !important;
	font-weight: 600 !important;
}

.aisv-upgrade {
	font-size: var(--aisv-fs-sm) !important;
	font-weight: 600 !important;
	text-decoration: none !important;
	color: #ffffff !important;
	background: rgba(255, 255, 255, 0.2) !important;
	padding: 3px 10px !important;
	border-radius: var(--aisv-r-pill) !important;
	border: 1px solid rgba(255, 255, 255, 0.35) !important;
	transition: background .15s ease !important;
}

.aisv-upgrade:hover {
	background: rgba(255, 255, 255, 0.3) !important;
	color: #ffffff !important;
	text-decoration: none !important;
}

/* ─────────────────────────────────────────────────────────────────────
   9. Tables (.aisv-table-card)
   ───────────────────────────────────────────────────────────────────── */
.aisv-table-card {
	background: var(--aisv-surface) !important;
	border: 1px solid var(--aisv-border) !important;
	border-radius: var(--aisv-r-lg) !important;
	box-shadow: var(--aisv-shadow-sm) !important;
	overflow-x: auto !important;
	overflow-y: hidden !important;
	margin: 0 0 var(--aisv-s4) !important;
	-webkit-overflow-scrolling: touch !important;
}

.aisv-table-card > table.widefat,
.aisv-table-card > .wp-list-table {
	min-width: 100% !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	background: transparent !important;
	margin: 0 !important;
}

.aisv-wrap table.widefat thead th,
.aisv-wrap .wp-list-table thead th {
	background: var(--aisv-surface-2) !important;
	border: 0 !important;
	border-bottom: 1px solid var(--aisv-border) !important;
	color: var(--aisv-text-2) !important;
	font-size: var(--aisv-fs-sm) !important;
	font-weight: 600 !important;
	letter-spacing: 0.03em !important;
	text-transform: uppercase !important;
	padding: var(--aisv-s3) var(--aisv-s4) !important;
}

.aisv-wrap table.widefat tbody td,
.aisv-wrap .wp-list-table tbody td {
	border: 0 !important;
	border-bottom: 1px solid var(--aisv-border) !important;
	padding: var(--aisv-s3) var(--aisv-s4) !important;
	font-size: var(--aisv-fs-base) !important;
	color: var(--aisv-text) !important;
	vertical-align: middle !important;
}

.aisv-wrap table.widefat tbody tr:hover td,
.aisv-wrap .wp-list-table tbody tr:hover td {
	background: var(--aisv-surface-2) !important;
}

.aisv-wrap table.widefat tbody tr:last-child td,
.aisv-wrap .wp-list-table tbody tr:last-child td {
	border-bottom: none !important;
}

/* ─────────────────────────────────────────────────────────────────────
   10. Form controls
   ───────────────────────────────────────────────────────────────────── */
.aisv-wrap input[type="text"],
.aisv-wrap input[type="email"],
.aisv-wrap input[type="url"],
.aisv-wrap input[type="password"],
.aisv-wrap input[type="number"],
.aisv-wrap input[type="search"],
.aisv-wrap select,
.aisv-wrap textarea {
	border: 1px solid var(--aisv-border-strong) !important;
	border-radius: var(--aisv-r-sm) !important;
	padding: 8px 12px !important;
	font-size: 13px !important;
	color: var(--aisv-text) !important;
	background: var(--aisv-surface) !important;
	transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
}

.aisv-wrap input[type="text"]:focus,
.aisv-wrap input[type="email"]:focus,
.aisv-wrap input[type="url"]:focus,
.aisv-wrap input[type="password"]:focus,
.aisv-wrap input[type="number"]:focus,
.aisv-wrap input[type="search"]:focus,
.aisv-wrap select:focus,
.aisv-wrap textarea:focus {
	outline: none !important;
	border-color: var(--aisv-accent) !important;
	box-shadow: 0 0 0 3px rgba( 79, 70, 229, 0.2 ) !important;
}

.aisv-wrap input[type="checkbox"],
.aisv-wrap input[type="radio"] {
	width: 18px !important;
	height: 18px !important;
	accent-color: var(--aisv-accent) !important;
	border-radius: 4px !important;
	cursor: pointer !important;
}

.aisv-wrap .form-table {
	margin-top: var(--aisv-s3) !important;
}

.aisv-wrap .form-table th {
	padding: var(--aisv-s3) var(--aisv-s5) var(--aisv-s3) 0 !important;
	width: 220px !important;
	vertical-align: top !important;
	font-size: var(--aisv-fs-md) !important;
	font-weight: 600 !important;
	color: var(--aisv-text) !important;
}

.aisv-wrap .form-table td {
	padding: var(--aisv-s3) 0 !important;
	font-size: var(--aisv-fs-md) !important;
}

.aisv-wrap .regular-text {
	max-width: 440px !important;
	width: 100% !important;
}

/* ─────────────────────────────────────────────────────────────────────
   11. Progress bar, Runner log & Drag-Drop zone
   ───────────────────────────────────────────────────────────────────── */
.aisv-progress {
	height: 12px !important;
	background: var(--aisv-surface-3) !important;
	border-radius: var(--aisv-r-pill) !important;
	overflow: hidden !important;
	margin: var(--aisv-s3) 0 var(--aisv-s2) !important;
}

.aisv-progress__bar {
	height: 100% !important;
	width: 0;
	background: linear-gradient(90deg, var(--aisv-accent) 0%, #6366f1 100%) !important;
	border-radius: var(--aisv-r-pill) !important;
	transition: width .3s ease !important;
}

.aisv-progress__label {
	font-size: var(--aisv-fs-sm) !important;
	font-weight: 600 !important;
	color: var(--aisv-text-2) !important;
}

.aisv-log {
	margin-top: var(--aisv-s3) !important;
	max-height: 220px !important;
	overflow: auto !important;
	background: #0f172a !important;
	color: #cbd5e1 !important;
	border-radius: var(--aisv-r) !important;
	padding: var(--aisv-s3) var(--aisv-s4) !important;
	font: 12px/1.6 ui-monospace, SFMono-Regular, Menlo, monospace !important;
	white-space: pre-wrap !important;
	border: 1px solid #1e293b !important;
}

/* Drag-and-drop upload zone (restore page) */
.aisv-drop {
	display: flex !important;
	gap: 12px !important;
	align-items: center !important;
	flex-wrap: wrap !important;
	border: 2px dashed #cbd5e1 !important;
	border-radius: var(--aisv-r-lg) !important;
	padding: 24px !important;
	background: var(--aisv-surface-2) !important;
	transition: border-color .15s ease, background .15s ease !important;
}

.aisv-drop .dashicons {
	color: var(--aisv-accent) !important;
	font-size: 28px !important;
	width: 28px !important;
	height: 28px !important;
}

.aisv-drop.is-dragover {
	border-color: var(--aisv-accent) !important;
	background: var(--aisv-accent-soft) !important;
}

/* Empty state */
.aisv-empty {
	background: var(--aisv-surface) !important;
	border: 1px dashed var(--aisv-border-strong) !important;
	border-radius: var(--aisv-r-lg) !important;
	padding: var(--aisv-s8) !important;
	text-align: center !important;
	color: var(--aisv-text-2) !important;
}

.aisv-empty__lead {
	font-size: var(--aisv-fs-lg) !important;
	font-weight: 600 !important;
	color: var(--aisv-text) !important;
	margin: 0 0 var(--aisv-s2) !important;
}

/* ─────────────────────────────────────────────────────────────────────
   12. Notices, What's New & Modals
   ───────────────────────────────────────────────────────────────────── */
.aisv-wrap .notice {
	border-radius: var(--aisv-r) !important;
	border: 1px solid var(--aisv-border) !important;
	border-left-width: 4px !important;
	box-shadow: var(--aisv-shadow-sm) !important;
	padding: 12px 16px !important;
	margin: var(--aisv-s3) 0 var(--aisv-s5) !important;
}

.aisv-wrap .notice-success {
	border-left-color: var(--aisv-success) !important;
	background: var(--aisv-success-soft) !important;
}

.aisv-wrap .notice-warning {
	border-left-color: var(--aisv-warning) !important;
	background: var(--aisv-warning-soft) !important;
}

.aisv-wrap .notice-error {
	border-left-color: var(--aisv-danger) !important;
	background: var(--aisv-danger-soft) !important;
}

.aisv-wrap .notice-info {
	border-left-color: var(--aisv-accent) !important;
	background: var(--aisv-accent-soft) !important;
}

/* What's New */
.aisv-whatsnew {
	display: flex !important;
	flex-direction: column !important;
	gap: var(--aisv-s5) !important;
	max-width: 860px !important;
}

.aisv-whatsnew__ver {
	font-size: var(--aisv-fs-lg) !important;
	font-weight: 700 !important;
	color: var(--aisv-text) !important;
}

.aisv-whatsnew__badge {
	margin-left: var(--aisv-s2) !important;
	display: inline-block !important;
	padding: 2px 9px !important;
	border-radius: var(--aisv-r-pill) !important;
	background: var(--aisv-success-soft) !important;
	color: var(--aisv-success) !important;
	border: 1px solid #a7f3d0 !important;
	font-size: var(--aisv-fs-xs) !important;
	font-weight: 700 !important;
}

.aisv-whatsnew__items {
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
	display: flex !important;
	flex-direction: column !important;
	gap: var(--aisv-s4) !important;
}

.aisv-whatsnew__items li {
	display: flex !important;
	gap: var(--aisv-s3) !important;
	align-items: flex-start !important;
	margin: 0 !important;
}

.aisv-whatsnew__dot {
	flex: 0 0 auto !important;
	width: 8px !important;
	height: 8px !important;
	margin-top: 6px !important;
	border-radius: 50% !important;
	background: var(--aisv-accent) !important;
}

/* ─────────────────────────────────────────────────────────────────────
   12. Start Backup, Row Actions, Danger Buttons & Modal
   ───────────────────────────────────────────────────────────────────── */

/* Primary Action Buttons & Icon Alignment */
.aisv-wrap .button-primary,
.aisv-wrap a.button-primary,
.aisv-wrap button.button-primary,
.aisv-wrap #aisv-start-backup {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 7px !important;
	height: 38px !important;
	padding: 0 16px 0 12px !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	line-height: 1 !important;
	vertical-align: middle !important;
	border-radius: var(--aisv-r-sm) !important;
	background: var(--aisv-accent) !important;
	border-color: var(--aisv-accent) !important;
	color: #ffffff !important;
	box-shadow: 0 2px 4px rgba(79, 70, 229, 0.25) !important;
	text-decoration: none !important;
	cursor: pointer !important;
	transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease !important;
}

.aisv-wrap .button-primary:hover,
.aisv-wrap a.button-primary:hover,
.aisv-wrap button.button-primary:hover,
.aisv-wrap .button-primary:focus,
.aisv-wrap a.button-primary:focus,
.aisv-wrap button.button-primary:focus,
.aisv-wrap #aisv-start-backup:hover,
.aisv-wrap #aisv-start-backup:focus {
	background: var(--aisv-accent-strong) !important;
	border-color: var(--aisv-accent-strong) !important;
	color: #ffffff !important;
	box-shadow: 0 4px 10px rgba(79, 70, 229, 0.35) !important;
}

.aisv-wrap .button-primary .dashicons,
.aisv-wrap a.button-primary .dashicons,
.aisv-wrap #aisv-start-backup .dashicons,
.aisv-wrap #aisv-start-backup .dashicons-vault,
.aisv-wrap #aisv-start-backup .dashicons-database-export,
.aisv-wrap a.button-primary .dashicons-download {
	font-size: 18px !important;
	width: 18px !important;
	height: 18px !important;
	line-height: 18px !important;
	margin: 0 !important;
	padding: 0 !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	vertical-align: middle !important;
	position: static !important;
	top: auto !important;
	transform: none !important;
}

.aisv-wrap .button-primary .dashicons:before,
.aisv-wrap a.button-primary .dashicons:before,
.aisv-wrap #aisv-start-backup .dashicons:before {
	font-size: 18px !important;
	line-height: 18px !important;
	width: 18px !important;
	height: 18px !important;
	margin: 0 !important;
	padding: 0 !important;
	display: inline-block !important;
	vertical-align: middle !important;
	text-align: center !important;
}

/* Table Row Actions (Download, Restore, Verify, Delete) */
.aisv-row-actions {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: flex-end !important;
	gap: 6px !important;
	white-space: nowrap !important;
	vertical-align: middle !important;
}

.aisv-row-actions form {
	display: inline-flex !important;
	align-items: center !important;
	margin: 0 !important;
	padding: 0 !important;
	vertical-align: middle !important;
}

.aisv-row-actions .button {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	height: 28px !important;
	line-height: 26px !important;
	padding: 0 10px !important;
	margin: 0 !important;
	font-size: 12px !important;
	font-weight: 500 !important;
	border-radius: var(--aisv-r-sm) !important;
	vertical-align: middle !important;
	box-shadow: none !important;
	border: 1px solid var(--aisv-border-strong) !important;
	background: var(--aisv-surface) !important;
	color: var(--aisv-text-2) !important;
	box-sizing: border-box !important;
	transition: all 0.15s ease !important;
}

.aisv-row-actions .button:hover,
.aisv-row-actions .button:focus {
	border-color: var(--aisv-accent) !important;
	color: var(--aisv-accent) !important;
	background: var(--aisv-accent-soft) !important;
}

/* Danger Button in Table Row */
.aisv-wrap .button.aisv-btn--danger,
.aisv-wrap .aisv-btn--danger {
	color: var(--aisv-danger) !important;
	border-color: #fecaca !important;
	background: #fff5f5 !important;
	box-shadow: none !important;
}

.aisv-wrap .button.aisv-btn--danger:hover,
.aisv-wrap .button.aisv-btn--danger:focus,
.aisv-wrap .aisv-btn--danger:hover,
.aisv-wrap .aisv-btn--danger:focus {
	color: #ffffff !important;
	background: var(--aisv-danger) !important;
	border-color: var(--aisv-danger) !important;
}

/* Modal Confirmation Dialog */
.aisv-modal-overlay {
	position: fixed !important;
	inset: 0 !important;
	z-index: 100000 !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	padding: var(--aisv-s5) !important;
	background: rgba(15, 23, 42, 0.6) !important;
	backdrop-filter: blur(4px) !important;
	animation: aisv-modal-fade 0.15s ease-out !important;
}

.aisv-modal {
	width: 100% !important;
	max-width: 440px !important;
	background: var(--aisv-surface) !important;
	color: var(--aisv-text) !important;
	border: 1px solid var(--aisv-border) !important;
	border-radius: var(--aisv-r-lg) !important;
	box-shadow: 0 20px 40px rgba(15, 23, 42, 0.22) !important;
	overflow: hidden !important;
	animation: aisv-modal-pop 0.15s ease-out !important;
}

.aisv-modal__head {
	padding: 22px 24px 0 !important;
}

.aisv-modal__title {
	margin: 0 !important;
	font-size: 17px !important;
	font-weight: 700 !important;
	color: var(--aisv-text) !important;
	line-height: 1.3 !important;
}

.aisv-modal__body {
	padding: 14px 24px 22px !important;
	font-size: 14px !important;
	line-height: 1.55 !important;
	color: var(--aisv-text-2) !important;
}

.aisv-modal__actions {
	display: flex !important;
	justify-content: flex-end !important;
	gap: 10px !important;
	padding: 14px 24px !important;
	background: var(--aisv-surface-2) !important;
	border-top: 1px solid var(--aisv-border) !important;
}

.aisv-modal__actions .button {
	height: 36px !important;
	line-height: 34px !important;
	padding: 0 16px !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	border-radius: var(--aisv-r-sm) !important;
	cursor: pointer !important;
}

.aisv-modal__actions .aisv-btn--danger {
	background: var(--aisv-danger) !important;
	border-color: var(--aisv-danger) !important;
	color: #ffffff !important;
	box-shadow: 0 2px 4px rgba(239, 68, 68, 0.25) !important;
}

.aisv-modal__actions .aisv-btn--danger:hover,
.aisv-modal__actions .aisv-btn--danger:focus {
	background: #dc2626 !important;
	border-color: #dc2626 !important;
	color: #ffffff !important;
}

@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; }
}

/* ─────────────────────────────────────────────────────────────────────
   13. Responsive Breakpoints
   ───────────────────────────────────────────────────────────────────── */
@media screen and (max-width: 960px) {
	.aisv-grid-2,
	.aiopt-grid-2 {
		grid-template-columns: 1fr !important;
	}

	.aisv-grid-3,
	.aiopt-grid-3 {
		grid-template-columns: 1fr !important;
	}
}

@media screen and (max-width: 782px) {
	.aisv-wrap {
		margin-right: 10px !important;
	}

	.aisv-page__head {
		padding: 18px 20px !important;
	}

	.aisv-tabs,
	.aiopt-tabs {
		gap: 2px !important;
	}

	.aisv-tabs a,
	.aiopt-tabs a {
		padding: 7px 11px !important;
		font-size: 12px !important;
	}

	.aisv-nav-sections {
		flex-direction: column !important;
	}

	.aisv-nav-section {
		width: 100% !important;
		justify-content: flex-start !important;
	}

	.aisv-wrap .form-table th {
		width: auto !important;
		padding-bottom: var(--aisv-s1) !important;
	}
}