// Styles of the tournament block. Colours, spacing and fonts come from the theme
// (theme.json presets and currentColor), so the block follows the look of the site.

// Popover of the guided tours (driver.js, MIT); the tour script itself loads on demand.
// In a cascade layer: the theme's own styles (unlayered) win, so the popover buttons
// look like the buttons of the theme in every state instead of a mix of both.
@use "sass:meta";
@use "../colors";

@layer doroto-driver {
	@include meta.load-css("../../../node_modules/driver.js/dist/driver");
}

.doroto-block {
	@include colors.doroto-colors;

	h2,
	h3,
	h4 {
		margin-block: 0 calc(var(--doroto-gap) / 2);
	}

	[hidden] {
		display: none !important;
	}

	&.is-busy {
		cursor: progress;

		button {
			pointer-events: none;
			opacity: 0.7;
		}
	}
}

.doroto-head {
	margin-bottom: var(--doroto-gap);
	padding: var(--doroto-gap);
	border-inline-start: 4px solid var(--doroto-accent);
	border-radius: var(--doroto-radius);
	background: var(--doroto-stripe);

	&__title {
		font-size: clamp(1.35em, 4vw, 1.9em);
		line-height: 1.2;
	}

	> :last-child {
		margin-bottom: 0;
	}

	&__organizers {
		margin: 0 0 calc(var(--doroto-gap) / 2);
		color: var(--doroto-muted);
		font-size: 0.875em;
	}

	&__meta {
		display: flex;
		flex-wrap: wrap;
		gap: 0.5em;
		align-items: center;
		margin: 0 0 calc(var(--doroto-gap) / 2);
		color: var(--doroto-muted);
	}
}

.doroto-details {
	margin: 0 0 calc(var(--doroto-gap) / 2);

	> summary {
		cursor: pointer;
		color: var(--doroto-muted);
		font-size: 0.875em;
	}

	&__text {
		margin-top: 0.5em;

		> :last-child {
			margin-bottom: 0;
		}
	}
}

.doroto-badge {
	display: inline-block;
	padding: 0.1em 0.6em;
	border-radius: 999px;
	background: var(--doroto-soft);
	color: inherit;
	font-size: 0.875em;
	font-weight: 600;

	&--closed {
		background: color-mix(in srgb, currentColor 10%, transparent);
	}
}

.doroto-progress {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5em;
	align-items: center;
	margin-bottom: calc(var(--doroto-gap) / 2);

	progress {
		flex: 1 1 10em;
		max-width: 20em;
		accent-color: var(--doroto-accent);
	}

	&__eta {
		color: var(--doroto-muted);
	}
}

.doroto-actions,
.doroto-row {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5em;
	align-items: center;
}

.doroto-button {
	cursor: pointer;

	&--secondary {
		background: transparent;
		color: inherit;
		border: 1px solid var(--doroto-border);
		border-radius: var(--doroto-radius);
		padding: 0.5em 1em;
		text-decoration: none;
		font: inherit;
	}
}

.doroto-button:not(.wp-element-button):not(.doroto-button--secondary) {
	background: var(--doroto-accent);
	color: var(--doroto-on-accent);
	border: 0;
	border-radius: var(--doroto-radius);
	padding: 0.5em 1em;
	font: inherit;
}

.is-destructive {
	color: var(--doroto-danger);
	border-color: var(--doroto-danger);
}

.doroto-button.is-destructive:not(.doroto-button--secondary) {
	background: var(--doroto-danger);
	color: #fff;
}

.doroto-icon-button {
	background: none;
	border: 0;
	padding: 0.25em 0.5em;
	color: inherit;
	cursor: pointer;
	font-size: 1.1em;
	line-height: 1;
}

.doroto-toast {
	position: sticky;
	top: var(--wp-admin--admin-bar--height, 0);
	z-index: 5;
	margin: 0 0 var(--doroto-gap);
	padding: 0.75em 1em;
	border-radius: var(--doroto-radius);
	background: var(--doroto-soft);
	border-left: 4px solid var(--doroto-accent);

	&.is-error {
		border-left-color: var(--doroto-danger);
		background: color-mix(in srgb, var(--doroto-danger) 10%, transparent);
	}
}

// Tabs: only with JavaScript (is-ready). Without it every panel is shown.
.doroto-tabs {
	display: none;
}

.doroto-block.is-ready {
	.doroto-tabs {
		display: flex;
		gap: 0.25em;
		overflow-x: auto;
		margin-bottom: var(--doroto-gap);
		padding: 0.3em;
		border-radius: var(--doroto-radius);
		background: var(--doroto-tabs-bg);
		color: var(--doroto-tabs-fg);
	}

	.doroto-panel:not(.is-active) {
		display: none;
	}

	.doroto-panel__title {
		// The tab names the panel already.
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}
}

.doroto-tab {
	flex: 1 0 auto;
	padding: 0.55em 1em;
	border: 0;
	border-bottom: 3px solid transparent;
	border-radius: calc(var(--doroto-radius) - 2px);
	background: none;
	color: inherit;
	font: inherit;
	cursor: pointer;

	&:hover {
		background: color-mix(in srgb, var(--doroto-surface) 45%, transparent);
	}

	// The active tab is a light "card" on the bar: readable with any accent colour.
	&.is-active {
		border-bottom-color: var(--doroto-accent);
		background: var(--doroto-surface);
		color: var(--doroto-surface-text);
		font-weight: 600;
		box-shadow: 0 1px 3px rgb(0 0 0 / 12%);
	}

	&:focus-visible {
		outline: 2px solid var(--doroto-accent);
		outline-offset: -2px;
	}
}

.doroto-panel {
	margin-bottom: calc(var(--doroto-gap) * 2);

	> .doroto-actions {
		margin-bottom: var(--doroto-gap);
	}
}

.doroto-empty,
.doroto-help {
	color: var(--doroto-muted);
}

.doroto-help {
	margin: 0.25em 0 0;
	font-size: 0.875em;
}

.doroto-notice,
.doroto-box,
.doroto-final,
.doroto-winners {
	margin-bottom: var(--doroto-gap);
	padding: var(--doroto-gap);
	border: 1px solid var(--doroto-border);
	border-radius: var(--doroto-radius);
}

.doroto-notice {
	background: var(--doroto-soft);
}

.doroto-box {
	box-shadow: 0 1px 3px rgb(0 0 0 / 6%);

	> h4,
	> summary {
		@include colors.doroto-strip;
	}

	> summary {
		cursor: pointer;
	}

	// A folded box is only its strip.
	@at-root details#{&}:not([open]) > summary {
		margin-bottom: calc(var(--doroto-gap) * -1);
		border-radius: var(--doroto-radius);
	}
}

.doroto-danger {
	border-color: color-mix(in srgb, var(--doroto-danger) 40%, transparent);

	> h4 {
		background: color-mix(in srgb, var(--doroto-danger) 12%, var(--doroto-surface));
		color: var(--doroto-danger);
	}
}

// Match cards
.doroto-cards {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr));
	gap: var(--doroto-gap);
	margin: 0 0 var(--doroto-gap);
	padding: 0;
	list-style: none;
}

.doroto-card {
	padding: var(--doroto-gap);
	border: 1px solid var(--doroto-border);
	border-radius: var(--doroto-radius);
	box-shadow: 0 1px 3px rgb(0 0 0 / 6%);
}

// Match card: coloured header strip with the number, the teams split by a line.
.doroto-match {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	padding: 0 var(--doroto-gap) var(--doroto-gap);

	&__number {
		margin: 0 calc(var(--doroto-gap) * -1) 0.75em;
		padding: 0.4em var(--doroto-gap);
		background: var(--doroto-tabs-bg);
		color: var(--doroto-tabs-fg);
		font-size: 0.8em;
		font-weight: 600;
		letter-spacing: 0.03em;
		text-transform: uppercase;
	}

	&__sides {
		display: grid;
		gap: 0.35em;
		margin: 0 0 0.75em;
		font-weight: 600;
		font-size: 1.05em;
	}

	&__vs {
		display: flex;
		gap: 0.5em;
		align-items: center;
		color: var(--doroto-muted);
		font-weight: 400;
		font-size: 0.85em;

		&::before,
		&::after {
			content: "";
			flex: 1;
			border-top: 1px solid var(--doroto-border);
		}
	}

	.doroto-score {
		margin-top: auto;
	}
}

// Server of the match (column R1 of the 1.x table).
.doroto-serve {
	display: inline-block;
	margin-inline-start: 0.35em;
	padding: 0 0.45em;
	border-radius: 999px;
	background: var(--doroto-accent);
	color: var(--doroto-on-accent);
	font-size: 0.7em;
	font-weight: 600;
	line-height: 1.6;
	vertical-align: 0.15em;
	white-space: nowrap;
}

// Final match: the teams like a match card; the winning pair gets the cup.
.doroto-final {
	box-shadow: 0 1px 3px rgb(0 0 0 / 6%);

	> h4 {
		@include colors.doroto-strip;
	}

	&__sides {
		max-width: 30rem;

		.doroto-match__side.is-won {
			padding: 0.25em 0.5em;
			border-radius: calc(var(--doroto-radius) - 2px);
			background: var(--doroto-soft);
		}

		&.has-result .doroto-serve {
			display: none;
		}
	}

	&__cup {
		display: none;
		margin-inline-end: 0.35em;

		.is-won > & {
			display: inline;
		}
	}

	&__result {
		font-size: 1.25em;
		font-variant-numeric: tabular-nums;
	}

	// Options cannot be styled on every device (their text names the special group); desktop browsers show this.
	option.is-special {
		background: var(--doroto-special);
	}
}

.doroto-score {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5em;
	align-items: center;

	&__input {
		box-sizing: border-box;
		width: 3.2em;
		padding: 0.3em;
		font: inherit;
		font-size: 1.1em;
		text-align: center;
	}
}

.doroto-check {
	display: inline-flex;
	gap: 0.4em;
	align-items: center;
	margin-top: 0.5em;
}

// Results
.doroto-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.doroto-result {
	display: grid;
	grid-template-columns: 2.5em 1fr auto 1fr auto;
	gap: 0.5em;
	align-items: center;
	padding: 0.5em;
	border-bottom: 1px solid var(--doroto-border);

	&:nth-child(even) {
		background: var(--doroto-stripe);
	}

	&__number {
		color: var(--doroto-muted);
	}

	&__side:last-of-type {
		text-align: end;
	}

	&__score {
		font-weight: 700;
		font-variant-numeric: tabular-nums;
	}

	&.is-skipped {
		color: var(--doroto-muted);

		.doroto-result__score {
			font-weight: 400;
			font-style: italic;
		}
	}

	@media (max-width: 480px) {
		grid-template-columns: 2em 1fr auto;

		.doroto-result__side:last-of-type {
			grid-column: 2;
			text-align: start;
		}
	}
}

// Player names in the results: the current user in bold, the special
// group highlighted (same background as the "special group" tag).
.doroto-name {
	&.is-me {
		font-weight: 700;
	}

	&.is-special {
		padding: 0 0.25em;
		border-radius: 4px;
		background: var(--doroto-special);
		box-decoration-break: clone;
	}
}

// Standings
.doroto-table-wrap {
	overflow-x: auto;
	margin-bottom: var(--doroto-gap);
}

.doroto-help + .doroto-table-wrap,
.doroto-help + .doroto-list {
	margin-top: 0.5em;
}

.doroto-standings {
	width: 100%;
	border-collapse: collapse;
	font-variant-numeric: tabular-nums;

	th,
	td {
		padding: 0.5em;
		border-bottom: 1px solid var(--doroto-border);
		text-align: start;
		vertical-align: middle;
	}

	thead th {
		background: var(--doroto-tabs-bg);
		color: var(--doroto-tabs-fg);
		font-size: 0.875em;
		font-weight: 600;
		white-space: nowrap;
		border-bottom: 0;
	}

	thead th:first-child {
		border-start-start-radius: var(--doroto-radius);
	}

	thead th:last-child {
		border-start-end-radius: var(--doroto-radius);
	}

	tbody tr:nth-child(even) {
		background: var(--doroto-stripe);
	}

	td {
		white-space: nowrap;
	}

	tbody th {
		font-weight: 400;
	}

	tr.is-me th {
		font-weight: 700;
	}

	tbody tr.is-winner {
		background: var(--doroto-soft);
	}

	tr.is-suspended {
		color: var(--doroto-muted);
	}
}

.doroto-tag {
	display: inline-block;
	white-space: nowrap;
	margin-inline-start: 0.4em;
	padding: 0 0.4em;
	border-radius: 4px;
	background: var(--doroto-soft);
	font-size: 0.75em;

	&--muted {
		background: color-mix(in srgb, currentColor 10%, transparent);
	}

	&--winner {
		font-weight: 700;
	}

	&--special {
		background: var(--doroto-special);
	}
}

.doroto-menu {
	position: relative;

	summary {
		cursor: pointer;
		list-style: none;
		padding: 0 0.5em;
		font-size: 1.25em;

		&::-webkit-details-marker {
			display: none;
		}
	}

	&__items {
		position: absolute;
		inset-inline-end: 0;
		z-index: 10;
		display: grid;
		min-width: 14em;
		padding: 0.25em;
		border: 1px solid var(--doroto-border);
		border-radius: var(--doroto-radius);
		background: var(--wp--preset--color--base, #fff);
		box-shadow: 0 4px 16px rgb(0 0 0 / 15%);

		button {
			padding: 0.5em 0.75em;
			border: 0;
			background: none;
			color: inherit;
			font: inherit;
			text-align: start;
			cursor: pointer;

			&:hover,
			&:focus-visible {
				background: var(--doroto-soft);
			}

			&.is-destructive {
				color: var(--doroto-danger);
			}
		}
	}
}

// Forms: groups of the settings as cards with a coloured strip, two columns when there is room.
.doroto-settings__groups {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr));
	gap: var(--doroto-gap);
	align-items: start;
	margin-bottom: var(--doroto-gap);
}

.doroto-fieldset {
	min-width: 0;
	margin: 0;
	padding: var(--doroto-gap);
	border: 1px solid var(--doroto-border);
	border-radius: var(--doroto-radius);
	box-shadow: 0 1px 3px rgb(0 0 0 / 6%);

	// A floated legend can take the full width like a heading.
	> legend {
		@include colors.doroto-strip;
		float: left;
		box-sizing: border-box;
		width: calc(100% + var(--doroto-gap) * 2);
	}

	> legend + * {
		clear: both;
	}

	&--wide {
		grid-column: 1 / -1;
	}

	// Fields fill the column; a long option must not push the select out of the card.
	.doroto-field {
		grid-template-columns: minmax(0, 1fr);

		input:not([type="checkbox"]),
		select,
		textarea {
			box-sizing: border-box;
			width: 100%;
		}
	}

	.doroto-field:last-child {
		margin-bottom: 0;
	}
}

// Save bar of the settings: sticks to the bottom of the screen while the form is in view.
.doroto-savebar {
	position: sticky;
	bottom: 0;
	z-index: 4;
	display: flex;
	flex-wrap: wrap;
	gap: 0.75em;
	align-items: center;
	justify-content: flex-end;
	margin-bottom: var(--doroto-gap);
	padding: 0.6em var(--doroto-gap);
	border: 1px solid var(--doroto-border);
	border-radius: var(--doroto-radius);
	background: var(--doroto-surface);
	color: var(--doroto-surface-text);
	box-shadow: 0 -2px 10px rgb(0 0 0 / 8%);

	&.is-dirty {
		border-color: var(--doroto-accent);
	}

	&__note {
		margin-inline-end: auto;
		font-weight: 600;
	}
}

.doroto-field {
	display: grid;
	gap: 0.25em;
	margin-bottom: 0.75em;

	input,
	select,
	textarea {
		max-width: 100%;
		padding: 0.4em;
		font: inherit;
	}

	&--inline {
		grid-template-columns: auto minmax(0, 20em);
		align-items: center;
		gap: 0.5em;
	}
}

.doroto-final__choose {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5em;
	align-items: end;
	margin-bottom: var(--doroto-gap);
	border: 0;
	padding: 0;
}

// Dialogs (native <dialog>; hidden without JavaScript)
.doroto-dialog {
	max-width: min(30rem, calc(100vw - 2rem));
	padding: calc(var(--doroto-gap) * 1.5);
	border: 1px solid var(--doroto-border);
	border-radius: var(--doroto-radius);
	background: var(--wp--preset--color--base, #fff);
	color: var(--wp--preset--color--contrast, inherit);

	&::backdrop {
		background: rgb(0 0 0 / 40%);
	}
}

// Presentation (e.g. a screen at the club): read only, bigger text, no controls.
.doroto-block.is-presentation {
	font-size: 1.25em;

	.doroto-actions,
	.doroto-score,
	.doroto-menu,
	.doroto-box,
	.doroto-field,
	.doroto-icon-button,
	.doroto-check,
	.doroto-tabs {
		display: none !important;
	}
}

// Presentation started by the button: the block fills the screen; only its End button stays.
.doroto-block.is-presenting {
	font-size: 1.25em;

	.doroto-score,
	.doroto-menu,
	.doroto-box,
	.doroto-field,
	.doroto-icon-button,
	.doroto-check,
	.doroto-app,
	.doroto-head__actions > :not([data-help="present"]),
	.doroto-panel .doroto-actions {
		display: none !important;
	}
}

.doroto-block:fullscreen {
	overflow: auto;
	padding: calc(var(--doroto-gap) * 2);
	background: var(--wp--preset--color--base, #fff);
	color: var(--wp--preset--color--contrast, #111);
}

// Android app line under the header.
.doroto-app {
	margin: 0 0 var(--doroto-gap);
	padding: 0.5em 0.75em;
	border-left: 4px solid var(--doroto-accent);
	border-radius: var(--doroto-radius);
	background: var(--doroto-soft);
	font-size: 0.875em;
}

.doroto-help-button {
	min-width: 2.5em;
	font-weight: 700;
}

// Share dialog: QR code of the tournament link.
.doroto-qr {
	width: min(16rem, 70vw);
	margin: 0 auto var(--doroto-gap);
	background: #fff;

	svg {
		display: block;
		width: 100%;
		height: auto;
	}
}

// Help dialog: the list of tours.
.doroto-help-menu {
	margin: 0 0 var(--doroto-gap);
	padding: 0;
	list-style: none;

	li + li {
		margin-top: 0.25em;
	}
}

.doroto-link-button {
	padding: 0.25em 0;
	border: 0;
	background: none;
	color: var(--doroto-accent);
	font: inherit;
	text-align: start;
	text-decoration: underline;
	cursor: pointer;
}

// Map of the tournament place in the settings tab.
.doroto-map {
	// Own stacking context: the Leaflet panes (z-index 400+) stay under the dialogs and the toast.
	position: relative;
	z-index: 0;
	height: 18rem;
	margin-block: 0.5em;
	border: 1px solid var(--doroto-border);
	border-radius: var(--doroto-radius);

	&__pin {
		width: 22px;
		height: 22px;
		border: 3px solid #fff;
		border-radius: 50% 50% 50% 0;
		background: var(--doroto-accent, #1e5aa8);
		box-shadow: 0 1px 4px rgb(0 0 0 / 40%);
		transform: rotate(-45deg);
	}
}

// Tour popover in the colours of the block.
.driver-popover.doroto-tour {
	max-width: min(22rem, calc(100vw - 2rem));

	.driver-popover-title {
		font-size: 1rem;
	}

	.driver-popover-description {
		font-size: 0.95rem;
		line-height: 1.45;
	}

	// Theme buttons can be large: keep a gap and let them wrap under the progress.
	.driver-popover-footer {
		flex-wrap: wrap;
		gap: 0.5em;
	}

	.driver-popover-navigation-btns {
		flex-wrap: wrap;
		gap: 0.4em;
		margin-inline-start: auto;
	}

	.driver-popover-footer button {
		margin: 0;
	}

	// The close cross is an icon, not a theme button: no box, the colour of the popover text.
	.driver-popover-close-btn,
	.driver-popover-close-btn:hover,
	.driver-popover-close-btn:focus {
		min-height: 0;
		padding: 0;
		border: 0;
		background: transparent;
		box-shadow: none;
		color: inherit;
		opacity: 0.6;
	}

	.driver-popover-close-btn:hover,
	.driver-popover-close-btn:focus-visible {
		opacity: 1;
	}
}