/* JuiceBar Custom OAuth Authorization Page Styles */
/* IMPORTANT: All styles MUST be scoped to the OAuth panel to avoid */
/* affecting other Frappe web pages (login, signup, website, etc.) */

/* ===== OAuth Panel Container ===== */
/* The OAuth authorize page uses .panel.panel-default inside .page-content */
.page-content .panel.panel-default {
	background: white;
	border-radius: 16px;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
	border: none;
	max-width: 480px;
	margin: 40px auto;
	overflow: hidden;
}

/* ===== Panel Header ===== */
.page-content .panel.panel-default > .panel-heading {
	background: linear-gradient(135deg, #148E27 0%, #0f6e1d 100%);
	color: white;
	padding: 28px 32px;
	border: none;
}

.page-content .panel.panel-default > .panel-heading .panel-title {
	color: white !important;
	font-weight: 700;
	font-size: 1.25rem;
	margin-bottom: 4px;
}

.page-content .panel.panel-default > .panel-heading .panel-subtitle {
	color: rgba(255, 255, 255, 0.85);
	font-size: 0.9rem;
	margin: 0;
}

/* ===== Panel Body ===== */
.page-content .panel.panel-default > .panel-body {
	padding: 28px 32px;
}

/* ===== Scopes/Permissions List (inside OAuth panel only) ===== */
.page-content .panel.panel-default > .panel-body ul {
	list-style: none;
	padding: 0;
	margin: 0 0 24px 0;
}

.page-content .panel.panel-default > .panel-body ul li {
	padding: 10px 0;
	color: #444;
	font-size: 14px;
	display: flex;
	align-items: center;
	border-bottom: 1px solid #f0f0f0;
}

.page-content .panel.panel-default > .panel-body ul li:last-child {
	border-bottom: none;
}

.page-content .panel.panel-default > .panel-body ul li::before {
	content: "✓";
	color: #148E27;
	font-weight: bold;
	margin-right: 12px;
	font-size: 16px;
	flex-shrink: 0;
}

/* ===== Action Buttons (inside OAuth panel only) ===== */
.page-content .panel.panel-default .action-buttons {
	display: flex;
	gap: 12px;
	margin-top: 8px;
}

.page-content .panel.panel-default .action-buttons .btn {
	flex: 1;
	border-radius: 8px;
	padding: 12px 20px;
	font-size: 15px;
	font-weight: 600;
	cursor: pointer;
	transition: all 0.3s ease;
}

/* Allow button */
.page-content .panel.panel-default .action-buttons #allow,
.page-content .panel.panel-default .action-buttons .btn-primary {
	background: #148E27;
	color: white;
	border: none;
}

.page-content .panel.panel-default .action-buttons #allow:hover,
.page-content .panel.panel-default .action-buttons .btn-primary:hover {
	background: #0f6e1d;
	transform: translateY(-1px);
	box-shadow: 0 4px 12px rgba(20, 142, 39, 0.3);
}

/* Deny button */
.page-content .panel.panel-default .action-buttons #deny,
.page-content .panel.panel-default .action-buttons .btn-light {
	background: #f5f5f5;
	color: #333;
	border: 2px solid #e0e0e0;
}

.page-content .panel.panel-default .action-buttons #deny:hover,
.page-content .panel.panel-default .action-buttons .btn-light:hover {
	background: #e8e8e8;
	border-color: #d0d0d0;
}

/* ===== Error Panel ===== */
.page-content .panel.panel-danger {
	background: white;
	border-radius: 16px;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
	border: none;
	max-width: 480px;
	margin: 40px auto;
	overflow: hidden;
}

.page-content .panel.panel-danger > .panel-heading {
	background: #e53935;
	color: white;
	padding: 24px 32px;
	border: none;
}

.page-content .panel.panel-danger > .panel-heading .panel-title {
	color: white !important;
	font-weight: 700;
	font-size: 1.1rem;
}

.page-content .panel.panel-danger > .panel-body {
	padding: 28px 32px;
}

/* ===== Responsive (scoped to OAuth panels) ===== */
@media (max-width: 600px) {
	.page-content .panel.panel-default,
	.page-content .panel.panel-danger {
		margin: 16px;
		border-radius: 12px;
	}

	.page-content .panel.panel-default > .panel-heading,
	.page-content .panel.panel-danger > .panel-heading {
		padding: 20px 24px;
	}

	.page-content .panel.panel-default > .panel-body,
	.page-content .panel.panel-danger > .panel-body {
		padding: 20px 24px;
	}

	.page-content .panel.panel-default .action-buttons {
		flex-direction: column;
	}
}