/* /css/style.css */

:root {
	--bg-color: #121212; 
	--card-bg: #1e1e1e;
	--text-color: #f5f5f5;
	--accent-color: #d4af37; 
	--accent-hover: #b5952f;
	--disabled-bg: #2a2a2a;
	--disabled-text: #666666;
	--danger-color: #ff4c4c;
	--danger-hover: #cc0000;
	--font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

body {
	background-color: var(--bg-color);
	color: var(--text-color);
	font-family: var(--font-family);
	line-height: 1.6;
	padding: 20px;
}

.container {
	max-width: 1200px;
	margin: 0 auto;
	padding: 20px;
}

/* Stili Testo */
h1, h2, h3 {
	color: var(--accent-color);
	margin-bottom: 15px;
}

/* Form e Input */
input, select, textarea, button {
	width: 100%;
	padding: 10px;
	margin-bottom: 15px;
	border: 1px solid #333;
	border-radius: 5px;
	background-color: #222;
	color: var(--text-color);
}

button, .btn {
	background-color: var(--accent-color);
	color: #000;
	font-weight: bold;
	cursor: pointer;
	border: none;
	transition: background-color 0.3s ease;
	text-align: center;
	text-decoration: none;
	display: inline-block;
}

button:hover, .btn:hover {
	background-color: var(--accent-hover);
}

.btn-small {
	padding: 5px 10px;
	font-size: 0.8rem;
	margin: 2px;
	border-radius: 3px;
}

.btn-danger {
	background-color: var(--danger-color);
	color: white;
}

.btn-danger:hover {
	background-color: var(--danger-hover);
}

.form-container {
	background-color: var(--card-bg);
	padding: 20px;
	border-radius: 10px;
	margin-bottom: 30px;
}

/* Tabelle Dati */
.table-responsive {
	overflow-x: auto;
}

table {
	width: 100%;
	border-collapse: collapse;
	margin-bottom: 20px;
	background-color: var(--card-bg);
	border-radius: 5px;
	overflow: hidden;
}

th, td {
	padding: 15px;
	text-align: left;
	border-bottom: 1px solid #333;
}

th {
	background-color: #2a2a2a;
	color: var(--accent-color);
	text-transform: uppercase;
	font-size: 0.9rem;
}

tr:hover {
	background-color: #2a2a2a;
}

/* Grid per la Dashboard */
.dashboard-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
	gap: 20px;
	margin-top: 20px;
}

.tile {
	background-color: var(--card-bg);
	padding: 30px 20px;
	border-radius: 10px;
	text-align: center;
	text-decoration: none;
	color: var(--text-color);
	border: 2px solid transparent;
	transition: all 0.3s ease;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.tile h3 {
	margin: 10px 0;
	color: var(--text-color);
}

.tile.active:hover {
	border-color: var(--accent-color);
	transform: translateY(-5px);
	box-shadow: 0 5px 15px rgba(212, 175, 55, 0.2);
}

.tile.disabled {
	background-color: var(--disabled-bg);
	color: var(--disabled-text);
	cursor: not-allowed;
	opacity: 0.6;
	filter: grayscale(100%);
}

.tile.disabled h3 {
	color: var(--disabled-text);
}

.header-action {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 20px;
}

/* Card Dispense Utente (Con e senza Immagine di Sfondo) */
/* Card Dispense Utente (Nuovo stile con Colori e Badge) */
.dispensa-card {
	background-color: var(--card-bg);
	padding: 20px;
	border-radius: 8px;
	display: flex;
	flex-direction: column;
	border: 2px solid transparent;
	transition: all 0.3s ease;
	position: relative;
	/* overflow deve essere visibile per far sbordare il badge */
}

.dispensa-card:hover {
	border-color: var(--accent-color);
	transform: translateY(-3px);
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.6);
}

/* Stile dell'immagine tonda stile Notifica iOS */
.dispensa-badge {
	position: absolute;
	top: -15px;
	right: -15px;
	width: 50px;
	height: 50px;
	border-radius: 50%;
	border: 3px solid var(--bg-color); /* Bordo spesso per staccarsi dallo sfondo della pagina */
	background-color: var(--card-bg);
	object-fit: cover;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
	z-index: 10;
	transition: transform 0.3s ease;
}

.dispensa-card:hover .dispensa-badge {
	transform: scale(1.1) rotate(5deg);
}

/* =========================================
   RESPONSIVE DESIGN (MOBILE)
   ========================================= */
@media (max-width: 768px) {
	body {
		padding: 10px;
	}
	.dashboard-grid {
		grid-template-columns: 1fr;
	}
	.header-action {
		flex-direction: column;
		align-items: flex-start;
		gap: 10px;
	}
	.table-responsive {
		overflow-x: visible;
	}
	table, thead, tbody, th, td, tr {
		display: block;
		width: 100%;
	}
	thead {
		display: none;
	}
	tr {
		margin-bottom: 20px;
		border: 1px solid #444;
		border-radius: 8px;
		background-color: var(--card-bg);
	}
	td {
		text-align: left !important;
		padding: 15px;
		border-bottom: 1px solid #333;
		position: relative;
	}
	td:last-child {
		border-bottom: none;
	}
	td::before {
		content: attr(data-label);
		display: block;
		font-size: 0.8rem;
		text-transform: uppercase;
		color: var(--accent-color);
		margin-bottom: 8px;
		font-weight: bold;
	}
}