/*
 * ReGifted Butiksinlösen – dashboard-stil.
 *
 * Varumärkesfärger och typografi enligt regifted-kunskapsbas
 * (references/07-visuell-identitet-canva-riktlinjer.md), med kontrastreglerna
 * därifrån respekterade: Klarblå används bara för stora ytor/knappar, aldrig
 * som liten brödtext; Turkos/Teal/Orange/Lila används bara som ytor/accenter
 * med mörk text ovanpå, aldrig som textfärg på ljus bakgrund.
 *
 * Layouten är mobile-first (grundstilen nedan) med en riktig tvåkolumns
 * skrivbordsvy från och med ~960px, se media query-blocket längst ner.
 */

:root {
	--regifted-turkos: #40cfde;
	--regifted-klarbla: #106efd;
	--regifted-teal: #83e3de;
	--regifted-gron: #37c563;
	--regifted-orange: #ff801d;
	--regifted-lila: #e171ea;
	--regifted-bla-sekundar: #597cff;
	--regifted-kolgra: #2e2e2e;
	--regifted-varmvit: #fffdfa;

	--regifted-border: #e5e1da;
	--regifted-text-muted: #6b6b6b;
}

.regifted-bi-wrap {
	max-width: 480px;
	margin: 2em auto;
	padding: 1.5em;
	font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
	color: var(--regifted-kolgra);
	background: var(--regifted-varmvit);
	box-sizing: border-box;
}

.regifted-bi-wrap *,
.regifted-bi-wrap *::before,
.regifted-bi-wrap *::after {
	box-sizing: border-box;
}

.regifted-bi-wrap h2,
.regifted-bi-wrap h3 {
	margin-top: 0;
	color: var(--regifted-kolgra);
	font-weight: 700;
}

.regifted-bi-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 1.5em;
	flex-wrap: wrap;
	gap: 0.5em;
}

.regifted-bi-logout {
	font-size: 0.9em;
	text-decoration: none;
	color: var(--regifted-klarbla);
	font-weight: 600;
}

.regifted-bi-login-form p {
	margin-bottom: 1em;
}

.regifted-bi-login-form label {
	display: block;
	margin-bottom: 0.3em;
	font-weight: 600;
}

.regifted-bi-login-form input {
	width: 100%;
	padding: 0.6em;
	font-size: 1em;
	box-sizing: border-box;
	border: 1px solid var(--regifted-border);
	border-radius: 4px;
	font-family: inherit;
}

.regifted-bi-btn {
	padding: 0.7em 1.2em;
	font-size: 1em;
	border-radius: 6px;
	border: 1px solid var(--regifted-border);
	background: #fff;
	color: var(--regifted-kolgra);
	cursor: pointer;
	font-family: inherit;
	font-weight: 600;
	transition: opacity 0.15s ease;
	text-align: center;
}

.regifted-bi-btn:hover {
	opacity: 0.85;
}

/* Klarblå är godkänd som textfärg på stora ytor/knappar (inte liten brödtext),
 * så den fungerar fint här som primärknapp med vit text ovanpå. */
.regifted-bi-btn-primary {
	background: var(--regifted-klarbla);
	border-color: var(--regifted-klarbla);
	color: #fff;
}

.regifted-bi-btn-large {
	width: 100%;
	padding: 1em;
	font-size: 1.1em;
	font-weight: 700;
}

.regifted-bi-btn-danger {
	background: #fff;
	border-color: #c0392b;
	color: #c0392b;
}

.regifted-bi-btn:disabled {
	opacity: 0.5;
	cursor: default;
}

/* Exportknappen: Grön yta med mörk text (kontrastregeln – accentfärger bär
 * aldrig text själva, de är ytor som Kolgrå-text ligger ovanpå). */
.regifted-bi-btn-export {
	display: inline-block;
	background: var(--regifted-gron);
	border-color: var(--regifted-gron);
	color: var(--regifted-kolgra);
	text-decoration: none;
	white-space: nowrap;
}

.regifted-bi-stats {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 0.75em;
	margin-bottom: 1.5em;
}

.regifted-bi-stat-box {
	background: var(--regifted-teal);
	border-radius: 10px;
	padding: 0.9em;
	text-align: center;
	color: var(--regifted-kolgra);
}

.regifted-bi-stat-box-payout {
	background: var(--regifted-turkos);
	grid-column: 1 / -1;
}

.regifted-bi-stat-label {
	display: block;
	font-size: 0.75em;
	color: var(--regifted-kolgra);
	opacity: 0.75;
	margin-bottom: 0.3em;
}

.regifted-bi-stat-value {
	display: block;
	font-size: 1.15em;
	font-weight: 700;
}

.regifted-bi-columns {
	display: flex;
	flex-direction: column;
	gap: 1.5em;
}

.regifted-bi-redeem-box,
.regifted-bi-history-box {
	border: 1px solid var(--regifted-border);
	border-radius: 10px;
	padding: 1.25em;
	background: #fff;
}

.regifted-bi-code-input-row {
	display: flex;
	gap: 0.5em;
	flex-wrap: wrap;
}

.regifted-bi-code-input-row input {
	flex: 1 1 160px;
	padding: 0.7em;
	font-size: 1.1em;
	border: 1px solid var(--regifted-border);
	border-radius: 6px;
	font-family: inherit;
}

.regifted-bi-scanner {
	margin-top: 1em;
	text-align: center;
}

.regifted-bi-scanner video {
	width: 100%;
	max-width: 400px;
	border-radius: 8px;
	background: #000;
}

.regifted-bi-card-info {
	margin-top: 1.25em;
	padding-top: 1.25em;
	border-top: 1px solid var(--regifted-border);
}

.regifted-bi-balance {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	margin-bottom: 1em;
	flex-wrap: wrap;
	gap: 0.3em;
}

.regifted-bi-balance-value {
	font-size: 1.5em;
	font-weight: 700;
	color: var(--regifted-klarbla);
}

.regifted-bi-amount-row input {
	width: 100%;
	padding: 0.7em;
	font-size: 1.2em;
	border: 1px solid var(--regifted-border);
	border-radius: 6px;
	box-sizing: border-box;
	margin-top: 0.3em;
	font-family: inherit;
}

.regifted-bi-hint {
	font-size: 0.8em;
	color: var(--regifted-text-muted);
	margin: 0.4em 0 1em;
}

.regifted-bi-last-redemption {
	margin-top: 1.5em;
	padding-top: 1em;
	border-top: 1px dashed var(--regifted-border);
}

.regifted-bi-notice {
	padding: 0.8em 1em;
	border-radius: 6px;
	margin-bottom: 1em;
}

.regifted-bi-notice-success {
	background: #e6f4ea;
	color: #1a7f4b;
}

.regifted-bi-notice-error {
	background: #fdecea;
	color: #c0392b;
}

.regifted-bi-notice-info {
	background: #eef3fb;
	color: #2b5f9e;
}

/* Historik-boxen */

.regifted-bi-history-controls {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 0.75em;
	flex-wrap: wrap;
	margin-bottom: 1em;
}

.regifted-bi-history-filter {
	flex: 1 1 160px;
}

.regifted-bi-history-filter label {
	display: block;
	margin-bottom: 0.3em;
	font-weight: 600;
	font-size: 0.85em;
}

#regifted-bi-period-select {
	width: 100%;
	padding: 0.6em;
	font-size: 0.95em;
	border: 1px solid var(--regifted-border);
	border-radius: 6px;
	font-family: inherit;
	background: #fff;
	color: var(--regifted-kolgra);
}

#regifted-bi-history-summary {
	font-size: 0.9em;
	color: var(--regifted-text-muted);
	margin-bottom: 0.75em;
}

.regifted-bi-history-table-wrap {
	overflow-x: auto;
	border: 1px solid var(--regifted-border);
	border-radius: 8px;
}

.regifted-bi-history-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.9em;
}

.regifted-bi-history-table th,
.regifted-bi-history-table td {
	text-align: left;
	padding: 0.6em 0.7em;
	border-bottom: 1px solid var(--regifted-border);
	white-space: nowrap;
}

.regifted-bi-history-table thead th {
	background: #f7f5f1;
	font-weight: 700;
	font-size: 0.85em;
}

.regifted-bi-history-table tbody tr:last-child td {
	border-bottom: none;
}

.regifted-bi-history-loading td {
	text-align: center;
	color: var(--regifted-text-muted);
	font-style: italic;
	white-space: normal;
}

.regifted-bi-status-badge {
	display: inline-block;
	padding: 0.2em 0.6em;
	border-radius: 999px;
	font-size: 0.85em;
	font-weight: 600;
	color: var(--regifted-kolgra);
}

.regifted-bi-status-redeemed {
	background: var(--regifted-gron);
}

.regifted-bi-status-reversed {
	background: #f0ede6;
	color: var(--regifted-text-muted);
}

/* Skrivbordsvy: redeem-boxen och historiken bredvid varandra, bredare wrap. */
@media (min-width: 960px) {
	.regifted-bi-wrap {
		max-width: 980px;
		padding: 2.5em;
		border-radius: 16px;
		box-shadow: 0 2px 24px rgba(46, 46, 46, 0.06);
	}

	.regifted-bi-stats {
		grid-template-columns: repeat(5, 1fr);
	}

	.regifted-bi-stat-box-payout {
		grid-column: auto;
	}

	.regifted-bi-columns {
		flex-direction: row;
		align-items: flex-start;
	}

	.regifted-bi-redeem-box {
		flex: 0 0 380px;
	}

	.regifted-bi-history-box {
		flex: 1 1 auto;
		min-width: 0;
	}
}

/* Mellanläge (surfplatta): 2+3 på statsraden känns bättre än en enda smal kolumn. */
@media (min-width: 620px) and (max-width: 959px) {
	.regifted-bi-stats {
		grid-template-columns: repeat(3, 1fr);
	}

	.regifted-bi-stat-box-payout {
		grid-column: auto;
	}
}