/*
 * Dario's Kitchen Display System — Styles
 *
 * Fullscreen board designed for a wall-mounted monitor or tablet.
 * Dark theme, high contrast, large text — readable from across the kitchen.
 *
 * @package Darios
 */

/* =========================================================================
   KDS SHELL — fullscreen dark layout
   ========================================================================= */

.kds-shell {
	background: #111;
	color: #f1f5f9;
	display: flex;
	flex-direction: column;
	font-family: 'Jost', sans-serif;
	min-height: 100vh;
}

/* =========================================================================
   HEADER BAR
   ========================================================================= */

.kds-header {
	align-items: center;
	background: #1a1a1a;
	border-bottom: 2px solid #C8181E;
	display: flex;
	justify-content: space-between;
	padding: 0.75rem 1.5rem;
}

.kds-header-title {
	color: #C8181E;
	font-family: 'Playfair Display', Georgia, serif;
	font-size: 1.5rem;
	font-weight: 700;
	letter-spacing: -0.02em;
	margin: 0;
}

#kds-clock {
	color: #94a3b8;
	font-size: 1.4rem;
	font-variant-numeric: tabular-nums;
	font-weight: 600;
}

/* =========================================================================
   BOARD — order card grid
   ========================================================================= */

#kds-board {
	display: grid;
	gap: 1rem;
	grid-template-columns: repeat( auto-fill, minmax( 280px, 1fr ) );
	padding: 1.25rem;
}

#kds-empty {
	color: #475569;
	font-size: 1.25rem;
	padding: 4rem;
	text-align: center;
}

/* =========================================================================
   ORDER CARDS
   ========================================================================= */

.kds-card {
	background: #1e293b;
	border-left: 5px solid #475569;
	border-radius: 8px;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	transition: border-color 0.3s;
}

.kds-card--new     { border-left-color: #C8181E; }
.kds-card--cooking { border-left-color: #f59e0b; }
.kds-card--ready   { border-left-color: #2A7A2E; }
.kds-card--complete{ border-left-color: #334155; opacity: 0.5; }

/* CARD HEADER */

.kds-card-header {
	align-items: center;
	background: #0f172a;
	display: flex;
	gap: 0.5rem;
	padding: 0.6rem 0.9rem;
}

.kds-order-type {
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

.kds-time {
	color: #94a3b8;
	font-size: 0.85rem;
	margin-left: auto;
}

.kds-status {
	border-radius: 100px;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.03em;
	padding: 0.2rem 0.65rem;
	text-transform: uppercase;
}

.kds-status--new     { background: rgba( 200, 24, 30, 0.2 );  color: #fb7185; }
.kds-status--cooking { background: rgba( 245, 158, 11, 0.2 ); color: #fbbf24; }
.kds-status--ready   { background: rgba( 42, 122, 46, 0.2 );  color: #4ade80; }
.kds-status--complete{ background: #1e293b; color: #475569; }

/* CARD BODY */

.kds-card-body {
	flex: 1;
	padding: 0.9rem;
}

.kds-customer {
	font-size: 1.05rem;
	margin: 0 0 0.4rem;
}

.kds-address {
	color: #94a3b8;
	font-size: 0.85rem;
	margin: 0 0 0.75rem;
}

.kds-items {
	list-style: none;
	margin: 0;
	padding: 0;
}

.kds-item {
	border-bottom: 1px solid #1e3a5f;
	font-size: 0.95rem;
	padding: 0.35rem 0;
}

.kds-item:last-child {
	border-bottom: none;
}

.kds-item-qty {
	color: #C8181E;
	font-weight: 700;
}

.kds-item-name {
	font-weight: 600;
}

.kds-item-mods {
	color: #94a3b8;
	font-size: 0.85rem;
}

/* CARD FOOTER */

.kds-card-footer {
	padding: 0.75rem 0.9rem;
}

.kds-advance-btn {
	background: #C8181E;
	border: none;
	border-radius: 6px;
	color: #fff;
	cursor: pointer;
	font-size: 0.95rem;
	font-weight: 700;
	padding: 0.55rem 1.1rem;
	transition: background 0.15s;
	width: 100%;
}

.kds-advance-btn:hover:not( :disabled ) {
	background: #a51318;
}

.kds-advance-btn:disabled {
	cursor: wait;
	opacity: 0.6;
}

.kds-complete-label {
	color: #334155;
	display: block;
	font-size: 0.85rem;
	text-align: center;
}

/* =========================================================================
   RESPONSIVE — narrow screens (portrait tablets)
   ========================================================================= */

@media ( max-width: 500px ) {
	#kds-board {
		grid-template-columns: 1fr;
	}
}