/**
 * HStorage Admin Styles
 *
 * @package HStorage
 */

/* Settings page wrapper */
.hstorage-settings {
	max-width: 800px;
}

.hstorage-settings h1 {
	margin-bottom: 20px;
}

.hstorage-settings h2 {
	margin-top: 30px;
	margin-bottom: 15px;
}

/* Form styling */
.hstorage-settings .form-table th {
	width: 200px;
	padding: 20px 10px 20px 0;
}

.hstorage-settings .form-table td {
	padding: 15px 10px;
}

.hstorage-settings .form-table input[type="text"],
.hstorage-settings .form-table input[type="email"],
.hstorage-settings .form-table input[type="password"] {
	width: 100%;
	max-width: 400px;
}

.hstorage-settings .description {
	color: #666;
	font-style: italic;
	margin-top: 5px;
}

/* Connection test section */
.hstorage-settings #hstorage-test-connection {
	margin-right: 10px;
}

/* Test result styling */
.hstorage-test-result {
	display: inline-block;
	padding: 5px 12px;
	border-radius: 3px;
	font-weight: 500;
	vertical-align: middle;
}

.hstorage-test-result.success {
	background-color: #d4edda;
	color: #155724;
	border: 1px solid #c3e6cb;
}

.hstorage-test-result.error {
	background-color: #f8d7da;
	color: #721c24;
	border: 1px solid #f5c6cb;
}

.hstorage-test-result.loading {
	background-color: #fff3cd;
	color: #856404;
	border: 1px solid #ffeeba;
}

/* Spinner animation */
.hstorage-spinner {
	display: inline-block;
	width: 16px;
	height: 16px;
	border: 2px solid #f3f3f3;
	border-top: 2px solid #856404;
	border-radius: 50%;
	animation: hstorage-spin 1s linear infinite;
	margin-right: 8px;
	vertical-align: middle;
}

@keyframes hstorage-spin {
	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(360deg);
	}
}

/* Admin notice styling */
.hstorage-settings .notice {
	margin: 15px 0;
}

/* User info section */
.hstorage-user-info {
	margin-top: 15px;
	max-width: 500px;
}

.hstorage-usage-table {
	border-collapse: collapse;
}

.hstorage-usage-table th {
	text-align: left;
	width: 40%;
	font-weight: 600;
}

.hstorage-usage-table td {
	text-align: left;
}

.hstorage-error-message {
	display: none;
	margin-top: 10px;
	padding: 8px 12px;
	background-color: #f8d7da;
	color: #721c24;
	border: 1px solid #f5c6cb;
	border-radius: 3px;
}

.hstorage-error-message.error {
	display: block;
}

/* Load user info button */
.hstorage-settings #hstorage-load-user-info {
	margin-right: 10px;
}

/* Responsive adjustments */
@media screen and (max-width: 782px) {
	.hstorage-settings .form-table th {
		width: auto;
		display: block;
		padding-bottom: 5px;
	}

	.hstorage-settings .form-table td {
		display: block;
		padding-top: 5px;
	}

	.hstorage-settings .form-table input[type="text"],
	.hstorage-settings .form-table input[type="email"],
	.hstorage-settings .form-table input[type="password"] {
		max-width: 100%;
	}

	.hstorage-test-result {
		display: block;
		margin-top: 10px;
	}
}