/* AIO Tools v3.1.0 — Unified Mobile & Tablet Responsive Design System */

/* 1. Tablet & Compact Laptop Breakpoint (<= 980px) */
@media screen and (max-width: 980px) {
	.aio-admin-wrap {
		width: calc(100% - 12px) !important;
		margin: 12px 12px 20px 0 !important;
	}
	#aio-app-root,
	.aio-admin-layout {
		flex-direction: column !important;
		min-height: auto !important;
	}
	.aio-sidebar {
		width: 100% !important;
		border-right: none !important;
		border-bottom: 1px solid #e2e8f0;
		padding: 12px 0 6px !important;
		position: sticky;
		top: 32px;
		z-index: 90;
		background: rgba(255, 255, 255, 0.96) !important;
		backdrop-filter: blur(10px);
	}
	.aio-brand {
		padding: 0 16px 10px !important;
		margin-bottom: 8px !important;
	}
	.aio-brand svg,
	.aio-brand img {
		max-width: 150px !important;
	}
	.aio-nav-list {
		position: static !important;
		display: flex !important;
		flex-wrap: nowrap;
		overflow-x: auto;
		gap: 6px;
		padding: 0 12px 6px !important;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		-ms-overflow-style: none;
	}
	.aio-nav-list::-webkit-scrollbar {
		display: none;
	}
	.aio-nav-item {
		white-space: nowrap;
		flex-shrink: 0;
		border-right: none !important;
		border-bottom: 2px solid transparent;
		border-radius: 8px;
		padding: 8px 13px !important;
		font-size: 13px !important;
		gap: 8px !important;
	}
	.aio-nav-item .ph {
		font-size: 18px !important;
	}
	.aio-nav-item.active {
		border-right: none !important;
		border-bottom-color: #2563eb;
		background: #eff6ff !important;
	}
	.aio-content-area {
		padding: 18px 16px 96px !important;
	}
}

/* 2. WordPress Mobile Admin Breakpoint (<= 782px) */
@media screen and (max-width: 782px) {
	.aio-admin-wrap {
		width: 100% !important;
		margin: 8px 0 16px 0 !important;
		padding-right: 10px !important;
	}
	.aio-sidebar {
		top: 46px;
	}
	.aio-header {
		flex-direction: row !important;
		flex-wrap: wrap;
		align-items: center !important;
		justify-content: space-between;
		gap: 10px;
		margin-bottom: 14px !important;
	}
	.aio-header h1 {
		font-size: 20px !important;
	}
	/* Horizontal Swipeable Sub-Tab Navigation Bars */
	.aio-mod-subnav,
	.aio-perf-subnav,
	.aio-wc-subnav {
		flex-wrap: nowrap !important;
		overflow-x: auto !important;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		-ms-overflow-style: none;
		padding: 5px !important;
		gap: 5px !important;
	}
	.aio-mod-subnav::-webkit-scrollbar,
	.aio-perf-subnav::-webkit-scrollbar,
	.aio-wc-subnav::-webkit-scrollbar {
		display: none;
	}
	.aio-mod-subbtn,
	.aio-perf-subbtn,
	.aio-wc-subbtn {
		white-space: nowrap !important;
		flex-shrink: 0 !important;
		padding: 8px 13px !important;
		font-size: 12.5px !important;
	}
	/* Prevent iOS Safari zoom on input focus */
	.aio-admin-wrap input[type="text"].aio-form-control,
	.aio-admin-wrap input[type="email"].aio-form-control,
	.aio-admin-wrap input[type="url"].aio-form-control,
	.aio-admin-wrap input[type="password"].aio-form-control,
	.aio-admin-wrap input[type="number"].aio-form-control,
	.aio-admin-wrap select.aio-form-control,
	.aio-admin-wrap textarea.aio-form-control {
		font-size: 15px !important;
		min-height: 40px;
	}
	/* Floating Bottom Save Bar */
	.aio-save-btn {
		bottom: calc(12px + env(safe-area-inset-bottom, 0px)) !important;
		right: 14px !important;
		left: 14px !important;
		width: calc(100% - 28px) !important;
		justify-content: center !important;
		padding: 13px 22px !important;
		font-size: 15px !important;
		z-index: 99990 !important;
	}
	.aio-content-area {
		padding: 14px 12px calc(92px + env(safe-area-inset-bottom, 0px)) !important;
	}
	/* Keep Toasts below 46px WP Mobile Admin Bar */
	#aio-toast-container {
		top: 56px !important;
		right: 12px !important;
		left: 12px !important;
	}
	.aio-toast {
		min-width: 0 !important;
		width: 100%;
		box-sizing: border-box;
		padding: 13px 16px !important;
	}
}

/* 3. Smartphone Portrait Breakpoint (<= 640px) */
@media screen and (max-width: 640px) {
	.aio-sidebar {
		position: static !important;
	}
	.aio-card,
	.aio-mod-layout .aio-card,
	.aio-wc-layout .aio-card {
		padding: 16px 14px !important;
		border-radius: 10px !important;
	}
	.aio-mod-topbar,
	.aio-perf-topbar,
	.aio-wc-topbar {
		padding: 11px 13px !important;
		gap: 10px !important;
	}
	.aio-mod-chips,
	.aio-status-badges,
	.aio-wc-chips {
		gap: 6px !important;
		width: 100%;
	}
	.aio-mod-chip,
	.aio-status-chip,
	.aio-wc-chip {
		font-size: 11.5px !important;
		padding: 4px 9px !important;
	}
	/* Collapse all multi-column form grids into 1 column */
	.aio-grid-2,
	.aio-grid-3,
	.aio-form-grid-2,
	.aio-form-grid-3,
	.aio-form-grid-smtp,
	.aio-form-grid-2-1,
	.aio-form-grid-tg {
		grid-template-columns: 1fr !important;
		gap: 10px !important;
	}
	.aio-mod-card-head,
	.aio-wc-card-head {
		flex-wrap: wrap !important;
		gap: 8px !important;
	}
	.aio-mod-row-top,
	.aio-wc-row-top {
		gap: 10px !important;
		align-items: flex-start !important;
	}
	.aio-mod-row-top .aio-switch,
	.aio-wc-row-top .aio-switch {
		margin-top: 2px !important;
	}
	.aio-hero-banner {
		padding: 16px !important;
	}
	.aio-hero-banner h2 {
		font-size: 19px !important;
	}
	/* Modal Dialog Mobile Fit */
	.aio-modal-dialog {
		padding: 18px 16px !important;
		border-radius: 12px !important;
	}
	.aio-modal-actions {
		flex-direction: row;
		gap: 8px;
	}
	.aio-modal-actions button {
		flex: 1;
		justify-content: center;
	}
	/* Bulk Comment Cleaner Bottom Action Bar */
	.aio-cmt-action-bar {
		flex-direction: column !important;
		align-items: stretch !important;
	}
	.aio-cmt-action-bar button {
		width: 100%;
		justify-content: center;
	}
}

/* 4. Compact Small Phone Breakpoint (<= 480px) */
@media screen and (max-width: 480px) {
	.aio-mod-uri-bar,
	.aio-uri-bar {
		flex-wrap: wrap !important;
		padding: 8px 10px !important;
	}
	.aio-mod-uri-bar code,
	.aio-uri-bar code {
		width: 100%;
		flex: 1 1 100% !important;
		white-space: normal !important;
		word-break: break-all !important;
	}
	.aio-mod-uri-bar button,
	.aio-uri-bar button {
		width: 100%;
		justify-content: center;
	}
	.aio-cnt-item-row {
		flex-wrap: wrap;
	}
	.aio-cnt-item-row input.aio-form-control:first-child {
		flex: 1 1 100% !important;
	}
	.aio-cnt-item-row input.aio-form-control:nth-child(2) {
		flex: 1 1 calc(100% - 52px) !important;
	}
}