@import url('https://fonts.bunny.net/css2?family=Condiment&family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

@layer theme {
	:root {
		--color-white: #FFF;
		--color-floral-white: #FFFEF5;
		--color-tangerine: #FF9679;
		--color-leaf-green: #5FD35F;
		--color-pumpkin: #FF8A43;
		--color-flax: #FFF5A1;
		--color-sage: #CECA9E;
		--color-dark-olive: #3C3731;
		--color-mud: #6A5B3C;
		--color-black: #000;

		/* Colors mapped from Crazy Bunny UI theme to Vibranium */
		--color-primary: var(--color-pumpkin); /* pumpkin */
		--color-secondary: var(--color-flax); /* flax */
		--color-accent: var(--color-tangerine); /* tangerine */
		--color-success: var(--color-leaf-green); /* leaf-green */
		--color-danger: #D6006F; 
		--color-warning: rgb(255, 183, 0);
		--color-light: var(--color-floral-white); /* floral-white */
		--color-muted: var(--color-sage); /* sage */
		--color-dark: var(--color-dark-olive); /* dark-olive */

		/* Override typography */
		--font-family-sans: 'Montserrat', sans-serif;
		--font-family-display: 'Condiment', cursive;
	}
}

/* Custom Admin Styles (Vibranium supplements) */
[v-cloak] { display: none; }

/* Custom header layout adjustments */
header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: var(--spacing-dsm);
	padding: var(--spacing-dsm);
	margin-block-end: var(--spacing-dmd);
	border-bottom: 1px solid var(--color-muted);
}

header > h1 {
	font-size: var(--font-size-dlg);
	font-family: var(--font-family-accent);
	color: var(--color-leaf-green);
	text-shadow: 0 0 1px var(--color-muted);
	
	& > span { color: var(--color-mud) }
}

button {
	touch-action: manipulation;
}

.card {
	border-radius: var(--border-radius-sm);
	box-shadow: var(--box-shadow-subtle);
}


/*
.actions, .header-actions {
	display: flex;
	gap: var(--spacing-dsm);
	flex-wrap: wrap;
	align-items: center;
	margin-bottom: var(--spacing-dmd);
}

.header-actions h2 {
	margin: 0;
	margin-left: auto; /* Push to right * /
}


/* Forms layout helpers * /
.form-group {
	margin-bottom: var(--spacing-dmd);
}

.form-row {
	display: flex;
	gap: var(--spacing-dmd);
	flex-wrap: wrap;
}

.form-row .form-group {
	flex: 1; 
	min-width: 200px;
	margin-bottom: 0;
}

.form-actions {
	margin-top: var(--spacing-dlg);
	position: sticky;
	bottom: var(--spacing-dmd);
	z-index: 90;
	background: var(--color-light);
	padding-top: var(--spacing-dsm);
}

/* Layout for Login View * /
.login-view {
	max-width: 400px;
	margin: var(--spacing-dlg) auto;
	background: white;
	padding: var(--spacing-dlg);
	border-radius: var(--border-radius-md);
	box-shadow: var(--box-shadow-base);
}

._danger {
	color: var(--color-danger);
	font-size: var(--font-size-dsm);
	margin-top: var(--spacing-dsm);
	text-align: center;
	font-weight: bold;
}
*/

/* Ventes List Grid */
.ventes-list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(20em, 1fr));
}

.vente-card {
	background: var(--color-white);
	border-start-start-radius: 0;
	border-end-start-radius: 0;
	border-inline-start-style: solid;
	border-inline-start-width: var(--border-2xl);
	
	&.active { border-inline-start-color: var(--color-success); }
	&.past { border-inline-start-color: var(--color-muted); opacity: 0.8; }
	&.future { border-inline-start-color: var(--color-info); }
}
/* 
	
.card-header {
	display: flex;
	justify-content: space-between;
	margin-bottom: var(--spacing-dsm);
	font-weight: bold;
} 

.vente-details {
	font-size: var(--font-size-dsm);
	color: color-mix(in srgb, var(--color-dark) 60%, transparent);
	margin-bottom: var(--spacing-dmd);
	flex-grow: 1;
}

*/
.vente-actions 
{
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--spacing-dxs);
	
	& > button {
		font-size: var(--font-size-dsm);
		padding: var(--spacing-dxs);
	}
}

/* Stock List Editor * /
.stocks-list { 
	margin-bottom: var(--spacing-dmd); 
	border: 1px solid var(--color-muted); 
	padding: var(--spacing-dsm); 
	border-radius: var(--border-radius-sm); 
	background: white;
}
.stock-item { display: flex; gap: var(--spacing-dsm); margin-bottom: var(--spacing-dsm); align-items: center; }
.stock-item select { flex: 2; }
.stock-item input { flex: 1; }
.btn-danger { color: var(--color-danger); border-color: var(--color-danger); }
.btn-danger:hover { background: color-mix(in srgb, var(--color-danger) 10%, transparent); }
*/
/* Orders View Tables/Tickets */
.table-container {
	overflow-x: auto;
	break-after: avoid;
	page: bordereau;

	table {
		--cell-width: 6.25%;
		--multiplicator: 1;
		
		table-layout: fixed;
		width: 100%;
		text-wrap: wrap;
		
		caption { 
			text-align: left;
			font-family: var(--font-family-base);
			font-weight: 500;
		}

		thead > tr,
		tfoot > tr 
		{
			font-size: var(--font-size-dsm);
		}
		
		tbody > tr {
			font-size: var(--font-size-dxs);
		}

		tfoot td {
			font-size: var(--font-size-dxs);
			font-weight: 500;
		}

		tbody td:nth-child(1) { font-weight: 500; }


		th, td { width: calc(var(--cell-width) * var(--multiplicator)); }

		/* :is(th, td):nth-child(1) { width: min-content; } */
		:is(th, td):nth-child(2) { --multiplicator: 2; }
		:is(th, td):nth-child(3) { --multiplicator: 4; }
		:is(th, td):nth-child(4) { --multiplicator: 4; }
		:is(th, td):nth-child(5) { --multiplicator: 2; }
		/* :is(th, td):nth-child(6) { width: min-content; } */
		/* :is(th, td):nth-child(7) { width: min-content; } */
		/* :is(th, td):nth-child(8) { width: min-content; } */
		
		:is(th, td):nth-child(n+6) 		 { text-align: right; }
		tfoot :is(th, td):nth-child(n+2) { text-align: right; }

		ul { list-style: none; }
	}

}

.tickets-container {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(32em, 1fr));
	break-after: avoid;
	page: fiche;
}

.ticket-card {
	break-after: page;
	break-inside: avoid;
	
	&:last-child { break-after: avoid; }
	
	& > header,
	& > footer {
		display: flex;
		justify-content: center;
		align-items: center;
		font-family: var(--font-family-base);
		font-size: var(--font-size-2dxl);
		font-weight: 500;
		color: inherit;
	}
	
	& > header { border-block-end: none; }
	
	& > div {
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		gap: var(--spacing-dxs);
		
		& > ul {
			align-self: flex-end;
			list-style: none;
			max-width: 80%;
			font-size: var(--font-size-dsm);
		}
		
		& > p { text-indent: 0; }
		& > time { font-weight: 500; }
	}
}
/*

@media (max-width: 600px) {
	.header-actions {
		flex-direction: column;
		align-items: flex-start;
	}
	.header-actions h2 { margin-left: 0; }
	td:nth-child(3) { width: 40%; }
}
*/