/**
 * Frontend CSS for SessionQuota 
 */

/* Logout Others Button Wrapper */
.sessionquota-logout-wrapper {
	margin: 20px 0;
}

.sessionquota-logout-wrapper button {
	padding: 10px 20px;
	font-size: 14px;
	cursor: pointer;
	background-color: #2271b1;
	color: #fff;
	border: none;
	border-radius: 3px;
	transition: background-color 0.2s ease;
}

.sessionquota-logout-wrapper button:hover:not(:disabled) {
	background-color: #135e96;
}

.sessionquota-logout-wrapper button:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

.sessionquota-logout-wrapper .sessionquota-count {
	font-weight: bold;
	margin-left: 5px;
}

.sessionquota-message {
	margin-top: 10px;
	padding: 10px;
	border-radius: 3px;
}

.sessionquota-message.sessionquota-success {
	background-color: #d4edda;
	color: #155724;
	border: 1px solid #c3e6cb;
}

.sessionquota-message.sessionquota-error {
	background-color: #f8d7da;
	color: #721c24;
	border: 1px solid #f5c6cb;
}

/* Account Section */
.sessionquota-account-section {
	margin: 20px 0;
	padding: 20px;
	background: #fff;
	border: 1px solid #ddd;
	border-radius: 5px;
}

.sessionquota-account-section h3 {
	margin-top: 0;
	font-size: 18px;
	font-weight: 600;
}

.sessionquota-account-section p {
	color: #666;
	margin-bottom: 15px;
}

/* Sessions List */
.sessionquota-sessions-list {
	margin: 20px 0;
	overflow-x: auto;
}

.sessionquota-table {
	width: 100%;
	border-collapse: collapse;
	margin-bottom: 20px;
}

.sessionquota-table thead th {
	background: #f7f7f7;
	padding: 12px;
	text-align: left;
	font-weight: 600;
	border-bottom: 2px solid #ddd;
}

.sessionquota-table tbody td {
	padding: 12px;
	border-bottom: 1px solid #eee;
}

.sessionquota-table tbody tr:hover {
	background-color: #f9f9f9;
}

.sessionquota-table tbody tr.session-current {
	background-color: #e7f4ff;
}

.sessionquota-table tbody tr.session-current:hover {
	background-color: #d4e9ff;
}

/* Actions */
.sessionquota-actions {
	margin-top: 20px;
	padding-top: 15px;
	border-top: 1px solid #eee;
}

/* WooCommerce Compatibility */
.woocommerce-account .sessionquota-account-section {
	margin: 0 0 30px 0;
}

/* Responsive */
@media (max-width: 768px) {
	.sessionquota-table {
		font-size: 14px;
	}

	.sessionquota-table thead {
		display: none;
	}

	.sessionquota-table tbody td {
		display: block;
		text-align: right;
		padding: 8px;
		border: none;
		position: relative;
		padding-left: 50%;
	}

	.sessionquota-table tbody td:before {
		content: attr(data-label);
		position: absolute;
		left: 10px;
		font-weight: 600;
		text-align: left;
	}

	.sessionquota-table tbody tr {
		margin-bottom: 15px;
		border: 1px solid #ddd;
		display: block;
	}

	.sessionquota-table tbody tr.session-current {
		border: 2px solid #2271b1;
	}
}

/* Sessions Wrapper */
.sessionquota-sessions-wrapper {
	margin: 20px 0;
}

.sessionquota-sessions-header {
	margin-bottom: 15px;
}

.sessionquota-sessions-header p {
	margin: 0;
	color: #666;
}

/* Destroy Session Button */
.sessionquota-destroy-session {
	padding: 5px 10px !important;
	font-size: 12px !important;
	cursor: pointer;
	background-color: #d63638 !important;
	color: #fff !important;
	border: none !important;
	border-radius: 3px !important;
	transition: background-color 0.2s ease;
}

.sessionquota-destroy-session:hover:not(:disabled) {
	background-color: #b32d2e !important;
}

.sessionquota-destroy-session:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

/* Current Session Label */
.session-current-label {
	font-size: 12px;
	color: #2271b1;
	font-weight: 600;
}

/* Session Info Badge */
.sessionquota-badge {
	display: inline-block;
	padding: 3px 8px;
	font-size: 12px;
	font-weight: 600;
	border-radius: 12px;
}

.sessionquota-badge-normal {
	background-color: #e7f4ff;
	color: #2271b1;
}

.sessionquota-badge-danger {
	background-color: #fcf0f1;
	color: #d63638;
}

/* Session Info Detailed */
.sessionquota-info-detailed {
	display: flex;
	flex-wrap: wrap;
	gap: 15px;
	padding: 15px;
	background: #f7f7f7;
	border-radius: 5px;
}

.sessionquota-info-item {
	display: flex;
	flex-direction: column;
}

.sessionquota-info-label {
	font-size: 12px;
	color: #666;
	margin-bottom: 3px;
}

.sessionquota-info-value {
	font-size: 14px;
	font-weight: 600;
	color: #333;
}

/* WooCommerce Account Dashboard */
.woocommerce-account .sessionquota-sessions-wrapper {
	margin-bottom: 30px;
}

/* BuddyPress Profile */
#buddypress .sessionquota-sessions-wrapper {
	margin: 20px 0;
}

/* Ultimate Member */
.um .sessionquota-sessions-wrapper {
	margin: 20px 0;
}