/* ============================================================
 * GOOGLE REVIEW QR DASHBOARD
 * Frontend styles
 * ============================================================ */

.ag-qrr-dashboard {
	--ag-qrr-primary: var(--e-global-color-primary, #1f1f1f);
	--ag-qrr-secondary: var(--e-global-color-secondary, #8b8176);
	--ag-qrr-text: var(--e-global-color-text, #2a2a2a);
	--ag-qrr-accent: var(--e-global-color-accent, #9c856d);

	--ag-qrr-muted: #777;
	--ag-qrr-border: rgba(0, 0, 0, 0.12);
	--ag-qrr-soft: rgba(0, 0, 0, 0.035);

	--ag-qrr-positive: #34734c;
	--ag-qrr-negative: #9d4545;

	width: 100%;
	font-family: inherit;
	color: var(--ag-qrr-text);
}


.ag-qrr-dashboard *,
.ag-qrr-dashboard *::before,
.ag-qrr-dashboard *::after {
	box-sizing: border-box;
}


.ag-qrr-dashboard a {
	color: inherit;
}


/* ============================================================
 * TOP BAR
 * ============================================================ */

.ag-qrr-topbar {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 24px;
	margin-bottom: 34px;
}


.ag-qrr-title {
	margin: 0;

	font-family: inherit;
	font-size: clamp(28px, 3vw, 42px);
	font-weight: inherit;
	line-height: 1.08;

	color: var(--ag-qrr-primary);
}


.ag-qrr-subtitle {
	margin: 16px 0 0;

	color: var(--ag-qrr-muted);

	font-size: 14px;
}


.ag-qrr-logout,
.ag-qrr-login-links a {
	color: inherit;

	text-decoration: underline;
	text-underline-offset: 3px;
}

.ag-qrr-logout {
	font-family: "Roboto", sans-serif;
	font-size: 14px;
}

.ag-qrr-logout:hover,
.ag-qrr-login-links a:hover {
	opacity: 0.7;
}



/* ============================================================
 * PERIOD FILTER
 * ============================================================ */

.ag-qrr-filter {
	display: grid;

	grid-template-columns:
		minmax(180px, 1fr)
		auto
		auto
		auto;

	gap: 12px;

	align-items: end;

	padding: 18px 0 28px;

	border-top: 1px solid var(--ag-qrr-border);
	border-bottom: 1px solid var(--ag-qrr-border);

	margin-bottom: 32px;
}


.ag-qrr-field label {
	display: block;

	margin-bottom: 7px;

	color: var(--ag-qrr-muted);

	font-size: 12px;
	font-weight: inherit;
	letter-spacing: 0.08em;

	text-transform: uppercase;
}


.ag-qrr-field select,
.ag-qrr-field input,
.ag-qrr-login-form input[type="text"],
.ag-qrr-login-form input[type="password"] {
	width: 100%;
	min-height: 44px;

	padding: 9px 12px;

	border: 1px solid var(--ag-qrr-border);
	border-radius: 0;

	background: #fff;

	color: inherit;

	font: inherit;
}


.ag-qrr-field select:focus,
.ag-qrr-field input:focus,
.ag-qrr-login-form input[type="text"]:focus,
.ag-qrr-login-form input[type="password"]:focus {
	outline: 1px solid var(--ag-qrr-primary);
	outline-offset: 1px;
}

.ag-qrr-subtitle {
	font-family: "Roboto Condensed", sans-serif;
}



/* ============================================================
 * BUTTONS
 * ============================================================ */

.ag-qrr-button,
.ag-qrr-login-form input[type="submit"] {
	min-height: 44px;

	padding: 10px 18px;

	border: 1px solid var(--ag-qrr-primary);
	border-radius: 0;

	background: var(--ag-qrr-primary);
	color: #fff;

	font: inherit;

	cursor: pointer;

	transition:
		opacity 0.2s ease,
		background-color 0.2s ease,
		color 0.2s ease;
}


.ag-qrr-button:hover,
.ag-qrr-login-form input[type="submit"]:hover {
	opacity: 0.8;
}


.ag-qrr-button:focus-visible,
.ag-qrr-login-form input[type="submit"]:focus-visible {
	outline: 2px solid var(--ag-qrr-primary);
	outline-offset: 2px;
}



/* ============================================================
 * KPI CARDS
 * ============================================================ */

.ag-qrr-cards {
	display: grid;

	grid-template-columns:
		repeat(2, minmax(0, 1fr));

	gap: 20px;

	margin-bottom: 38px;
}


.ag-qrr-card {
	padding: 24px 0;

	border-top: 1px solid var(--ag-qrr-border);
	border-bottom: 1px solid var(--ag-qrr-border);
}


.ag-qrr-card-location {
	margin: 0 0 18px;

	font-family: inherit;
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0.11em;

	text-transform: uppercase;
}


.ag-qrr-card-value {
	margin-bottom: 9px;

	color: var(--ag-qrr-primary);

	font-family: inherit;
	font-size: clamp(46px, 7vw, 74px);
	font-weight: inherit;
	line-height: 0.95;
}


.ag-qrr-card-label {
	color: var(--ag-qrr-muted);

	font-size: 14px;
}


.ag-qrr-change {
	display: flex;

	align-items: baseline;

	gap: 9px;

	margin-top: 18px;

	font-size: 13px;
}


.ag-qrr-change strong {
	font-size: 16px;
}


.ag-qrr-change.is-positive strong {
	color: var(--ag-qrr-positive);
}


.ag-qrr-change.is-negative strong {
	color: var(--ag-qrr-negative);
}


.ag-qrr-change.is-neutral strong {
	color: var(--ag-qrr-muted);
}



/* ============================================================
 * SECTIONS
 * ============================================================ */

.ag-qrr-section {
	margin-top: 42px;
}


.ag-qrr-section-title {
	margin: 0 0 20px;

	color: var(--ag-qrr-primary);

	font-family: inherit;
	font-size: 20px;
	font-weight: inherit;
}



/* ============================================================
 * CHART LEGEND
 * ============================================================ */

.ag-qrr-legend {
	display: flex;

	flex-wrap: wrap;

	gap: 22px;

	margin-bottom: 14px;

	font-size: 13px;
}


.ag-qrr-legend-item {
	display: inline-flex;

	align-items: center;

	gap: 8px;
}


.ag-qrr-legend-swatch {
	width: 22px;
	height: 2px;

	background: var(--ag-qrr-primary);
}


.ag-qrr-legend-item:nth-child(2)
.ag-qrr-legend-swatch {
	background: var(--ag-qrr-accent);
}



/* ============================================================
 * SVG CHART
 * ============================================================ */

.ag-qrr-chart-wrap {
	width: 100%;

	overflow: hidden;
}


.ag-qrr-chart {
	display: block;

	width: 100%;
	height: auto;
	min-height: 240px;
}


.ag-qrr-grid-line {
	stroke: var(--ag-qrr-border);
	stroke-width: 1;

	vector-effect: non-scaling-stroke;
}


.ag-qrr-axis-label {
	fill: var(--ag-qrr-muted);

	font-family: inherit;
	font-size: 12px;
}


.ag-qrr-line {
	fill: none;

	stroke-width: 2.2;
	stroke-linecap: round;
	stroke-linejoin: round;

	vector-effect: non-scaling-stroke;
}


/* 1960 – solid line */
.ag-qrr-line.ag-qrr-series-1 {
	stroke: var(--ag-qrr-primary);
	fill: none;
}


/* Beach Club – dashed line */
.ag-qrr-line.ag-qrr-series-2 {
	stroke: var(--ag-qrr-accent);
	fill: none;
	stroke-dasharray: 7 5;
}


.ag-qrr-point {
	vector-effect: non-scaling-stroke;
}



/* ============================================================
 * SUMMARY TABLE
 * ============================================================ */

.ag-qrr-table-wrap {
	width: 100%;
	overflow-x: auto;
}


.ag-qrr-table {
	width: 100%;
	border-collapse: collapse;

	font-size: 14px;
}


.ag-qrr-table th,
.ag-qrr-table td {
	padding: 14px 12px;

	border-bottom: 1px solid var(--ag-qrr-border);

	text-align: center;
	vertical-align: middle;
	white-space: nowrap;
}


.ag-qrr-table th:first-child,
.ag-qrr-table td:first-child {
	padding-left: 12px;
	text-align: center;
}


.ag-qrr-table th {
	color: var(--ag-qrr-muted);

	font-family: "Roboto Condensed", sans-serif;
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.07em;

	text-transform: uppercase;
}


.ag-qrr-table td {

}


.ag-qrr-table .is-total td {
	border-top: 1px solid var(--ag-qrr-primary);

	font-weight: 600;
}



/* ============================================================
 * LOGIN
 * ============================================================ */

.ag-qrr-login-shell {
	width: 100%;
	max-width: 480px;

	margin: 0 auto;

	padding: 48px 0;
}


.ag-qrr-login-shell h2 {
	margin: 0 0 10px;

	color: var(--ag-qrr-primary);

	font-family: inherit;
	font-size: clamp(28px, 4vw, 40px);
	font-weight: inherit;
	line-height: 1.1;
}


.ag-qrr-login-shell > p {
	margin: 0 0 26px;

	color: var(--ag-qrr-muted);
}


.ag-qrr-login-form p {
	margin: 0 0 18px;
}


.ag-qrr-login-form label {
	display: block;

	margin-bottom: 7px;

	font-size: 13px;
}


.ag-qrr-login-form .login-remember label {
	display: inline-flex;

	align-items: center;

	gap: 8px;

	margin: 0;
}


.ag-qrr-login-form .login-remember input {
	margin: 0;
}


.ag-qrr-login-message {
	margin-bottom: 24px;

	padding: 10px 14px;

	border-left: 2px solid var(--ag-qrr-negative);

	background: var(--ag-qrr-soft);
}


.ag-qrr-login-links {
	margin-top: 12px;

	font-size: 13px;
}

.ag-qrr-login-form input[type="text"],
.ag-qrr-login-form input[type="email"],
.ag-qrr-login-form input[type="password"] {
	text-transform: none !important;
}



/* ============================================================
 * ACCESS / EMPTY STATES
 * ============================================================ */

.ag-qrr-access-denied {
	padding: 30px 0;
}


.ag-qrr-empty {
	color: var(--ag-qrr-muted);
}



/* ============================================================
 * RESPONSIVE
 * ============================================================ */

@media (max-width: 767px) {

	.ag-qrr-topbar {
		flex-direction: column;

		align-items: flex-start;
	}


	.ag-qrr-filter {
		grid-template-columns: 1fr;
	}


	.ag-qrr-cards {
		grid-template-columns: 1fr;

		gap: 8px;
	}


	.ag-qrr-card-value {
		font-size: 54px;
	}


	.ag-qrr-table th,
	.ag-qrr-table td {
		padding: 12px 10px;
	}


	.ag-qrr-chart {
		min-height: 200px;
	}

}