:root{
	/* Modern Grey & Orange Theme */
	--primary-orange: #ff6b35;
	--primary-orange-light: #ff8c42;
	--primary-orange-dark: #e85a30;
	--background-dark: #1a1d21;
	--background-medium: #242830;
	--background-light: #2d3139;
	--background-card: #353a42;
	--text-primary: #ffffff;
	--text-secondary: #b8bcc8;
	--text-muted: #8a8f98;
	--border-color: #404651;
	--shadow-light: 0 2px 8px rgba(0, 0, 0, 0.15);
	--shadow-medium: 0 4px 16px rgba(0, 0, 0, 0.25);
	--shadow-heavy: 0 8px 32px rgba(0, 0, 0, 0.35);
	
	/* Legacy variables for backward compatibility */
	--background-color: var(--background-dark);
	--cat-text-color: var(--text-primary);
	--product-card-bg: var(--background-card);
	--product-text-color: var(--text-primary);
	--price-text-color: var(--primary-orange);
	--discount-icon-size: 32px;
	--product-card-shadow: var(--shadow-medium);
	--product-card-shadow-hover: var(--shadow-heavy);
}

body{
	margin:0;
	font-family:Roboto, 'Helvetica Neue', Arial, sans-serif;
	background: var(--background-dark);
	color: #000000
}

/* === MODERN ADMIN PANEL STYLES === */

/* App Background */
.modern-app {
	background: var(--background-dark) !important;
	min-height: 100vh;
}

/* Vuetify App Override */
.modern-app .v-application {
	background: var(--background-dark) !important;
}

/* Navigation Drawer (Sidebar) */
.modern-app .v-navigation-drawer {
	background: var(--background-medium) !important;
	border-right: 1px solid var(--border-color) !important;
}

.modern-app .v-navigation-drawer .v-list {
	background: transparent !important;
	padding: 8px;
}

.modern-app .v-navigation-drawer .v-list-item {
	border-radius: 8px;
	margin: 2px 0;
	color: var(--text-secondary) !important;
	transition: all 0.2s ease;
}

.modern-app .v-navigation-drawer .v-list-item:hover {
	background: rgba(255, 107, 53, 0.1) !important;
	color: var(--primary-orange) !important;
}

.modern-app .v-navigation-drawer .v-list-item--active {
	background: var(--primary-orange) !important;
	color: white !important;
}

.modern-app .v-navigation-drawer .v-list-item__icon {
	color: inherit !important;
}

.modern-app .v-navigation-drawer .v-divider {
	border-color: var(--border-color) !important;
	margin: 12px 0;
}

/* Main Content Area */
.modern-app .v-main {
	background: var(--background-dark) !important;
}

.modern-app .v-main .v-container {
	background: transparent !important;
	color: var(--text-primary) !important;
}

/* Headers */
.modern-app h1, .modern-app h2, .modern-app h3, .modern-app h4, .modern-app h5, .modern-app h6 {
	color: var(--text-primary) !important;
}

/* Cards */
.modern-app .v-card {
	background: var(--background-card) !important;
	color: var(--text-primary) !important;
	border: 1px solid var(--border-color) !important;
	box-shadow: var(--shadow-medium) !important;
}

.modern-app .v-card .v-card-title {
	color: var(--text-primary) !important;
	border-bottom: 1px solid var(--border-color);
	padding-bottom: 12px;
	margin-bottom: 12px;
}

.modern-app .v-card .v-card-text {
	color: var(--text-secondary) !important;
}

/* Buttons */
.modern-app .v-btn.primary {
	background: var(--primary-orange) !important;
	color: white !important;
	border: none !important;
}

.modern-app .v-btn.primary:hover {
	background: var(--primary-orange-light) !important;
	box-shadow: var(--shadow-medium) !important;
}

.modern-app .v-btn.success {
	background: #27ae60 !important;
	color: white !important;
}

.modern-app .v-btn.secondary {
	background: var(--background-light) !important;
	color: var(--text-primary) !important;
	border: 1px solid var(--border-color) !important;
}

.modern-app .v-btn.secondary:hover {
	background: var(--primary-orange) !important;
	color: white !important;
}

/* Text Fields and Inputs */
.modern-app .v-text-field .v-input__control .v-input__slot {
	background: var(--background-light) !important;
	border: 1px solid var(--border-color) !important;
	border-radius: 6px !important;
}

.modern-app .v-text-field .v-input__control .v-input__slot:hover {
	border-color: var(--primary-orange) !important;
}

.modern-app .v-text-field.v-input--is-focused .v-input__control .v-input__slot {
	border-color: var(--primary-orange) !important;
	box-shadow: 0 0 0 2px rgba(255, 107, 53, 0.2) !important;
}

.modern-app .v-text-field input {
	color: var(--text-primary) !important;
}

.modern-app .v-text-field .v-label {
	color: var(--text-secondary) !important;
}

.modern-app .v-text-field .v-label--active {
	color: var(--primary-orange) !important;
}

/* Select Fields */
.modern-app .v-select .v-input__control .v-input__slot {
	background: var(--background-light) !important;
	border: 1px solid var(--border-color) !important;
	border-radius: 6px !important;
}

.modern-app .v-select .v-select__selection {
	color: var(--text-primary) !important;
}

/* Data Tables */
.modern-app .v-data-table {
	background: var(--background-card) !important;
	color: var(--text-primary) !important;
}

.modern-app .v-data-table .v-data-table__wrapper table thead th {
	background: var(--background-medium) !important;
	color: var(--text-primary) !important;
	border-bottom: 1px solid var(--border-color) !important;
}

.modern-app .v-data-table .v-data-table__wrapper table tbody tr {
	border-bottom: 1px solid var(--border-color) !important;
}

.modern-app .v-data-table .v-data-table__wrapper table tbody tr:hover {
	background: rgba(255, 107, 53, 0.05) !important;
}

/* Expansion Panels */
.modern-app .v-expansion-panels .v-expansion-panel {
	background: var(--background-card) !important;
	border: 1px solid var(--border-color) !important;
	margin: 4px 0;
	border-radius: 8px !important;
}

.modern-app .v-expansion-panels .v-expansion-panel .v-expansion-panel-header {
	background: var(--background-medium) !important;
	color: var(--text-primary) !important;
	border-radius: 8px 8px 0 0 !important;
}

.modern-app .v-expansion-panels .v-expansion-panel .v-expansion-panel-content .v-expansion-panel-content__wrap {
	background: var(--background-card) !important;
	color: var(--text-secondary) !important;
}

/* Snackbar */
.modern-app .v-snackbar .v-snackbar__wrapper {
	background: var(--background-card) !important;
	color: var(--text-primary) !important;
	border: 1px solid var(--border-color) !important;
}

/* Dialog */
.modern-app .v-dialog .v-card {
	background: var(--background-card) !important;
}

/* === SPEISEKARTE STYLES === */

.preview-wrap{
	border:1px solid var(--border-color);
	border-radius:6px;
	overflow:hidden;
	background: var(--background-card);
}
.preview-frame{width:100%;height:600px;border:0}
.v-main__wrap{color: var(--text-primary)}
.speisekarte-bg{background:var(--background-color);min-height:100vh;padding:20px}
.speisekarte-container{max-width:1100px;margin:0 auto;background:transparent}

/* Grid behaviour */
.products-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px}
.products-grid.two-per-row{grid-template-columns:repeat(2,1fr)}
.products-grid.stack{grid-template-columns:repeat(1,1fr)}

/* Category two-column layout */
.categories-row.two-per-row{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;margin-bottom:18px}
.category-col{display:flex;flex-direction:column}
.category-col .products-grid{margin-bottom:0}

/* Responsive: collapse two-column category rows to single column on small screens */
@media (max-width: 900px) {
	.categories-row.two-per-row{display:block}
	.category-col{width:100%;margin-bottom:20px}
}

/* product card: elevated look + smooth hover lift */
.product-card{
	background:var(--product-card-bg);
	padding:12px;
	border-radius:12px;
	display:flex;
	align-items:center;
	gap:12px;
	box-shadow: var(--shadow-medium);
	transition: transform 220ms cubic-bezier(.2,.9,.2,1), box-shadow 220ms cubic-bezier(.2,.9,.2,1);
	will-change: transform, box-shadow;
}

.product-card:hover{
	transform: translateY(-4px);
	box-shadow: var(--shadow-heavy);
	border-color: var(--primary-orange);
}

/* remove click-down feedback so cards stay elevated when clicked; user wanted hover-only lift */
.product-card:active{
	transform: translateY(-4px);
}

.product-icon{
	position: relative;
	overflow: visible;
	font-size: 32px;
	width: 56px;
	height: 56px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 8px;
	background: linear-gradient(180deg, rgba(255,107,53,0.1), rgba(255,107,53,0.05));
}

.product-icon img{
	width: 48px;
	height: 48px;
	object-fit: cover;
	border-radius: 8px;
	transition: transform 180ms ease;
}

.product-card:hover .product-icon img{
	transform: scale(1.04);
}

.product-meta{display:flex;flex-direction:column}
.product-name{font-weight:600;color:var(--product-text-color);display:inline-flex;align-items:center;gap:8px}
.product-price{color:var(--price-text-color);font-weight: bold;}

.sold-out{display:inline-block;background:var(--primary-orange-dark);color:white;padding:4px 8px;border-radius:6px;font-weight:700;margin-left:8px}
.price-orig{color:var(--text-muted)}
.price-disc{color:#ca2424;font-weight:700}

.discount-icon-inline{font-size:16px;vertical-align:middle}
.product-icon-text{position:relative;z-index:0}
/* Icon image in editor header */
.product-icon-wrapper{width:24px;height:24px;display:flex;align-items:center;justify-content:center}
.product-icon-img{width:24px;height:24px;object-fit:cover;border-radius:4px}
.product-panel-summary{display:flex;align-items:center;gap:8px;width:100%}
.product-panel-summary .product-icon-text{font-size:18px;width:24px;text-align:center}
.product-panel-summary .product-name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.product-panel-summary .product-price{margin-left:6px;color:var(--price-text-color);font-weight:700}
.product-panel-summary .product-category{color:var(--text-muted);margin-left:6px;font-size:0.9rem}
.discount-icon-overlay{position:absolute;display:flex;align-items:center;justify-content:center;pointer-events:none;z-index:9999;font-size:var(--discount-icon-size,32px);line-height:1}
.discount-icon-overlay img{width:var(--discount-icon-size,32px);height:var(--discount-icon-size,32px);object-fit:cover;border-radius:6px}

.discount-icon-inline{font-size:16px;vertical-align:middle;color:inherit}

/* sold-out image overlay: centered over the product card/icon */
.sold-out-image-overlay{
	position:absolute;
	top:50%;
	left:50%;
	transform:translate(-50%,-50%);
	width:var(--discount-icon-size,32px);
	height:var(--discount-icon-size,32px);
	object-fit:contain;
	pointer-events:none;
	z-index:9999;
}

.product-edit{padding:8px 0}

/* === MAIN LAYOUT & COMPONENTS === */

.category-header{
	margin-top:24px;
	margin-bottom:8px;
	font-size:1.25rem;
	color:var(--cat-text-color);
}

.products-grid { 
	margin-bottom: 12px; 
}


.speisekarte-header{
	display:flex;
	flex-direction:column;
	align-items:center;
	gap:8px;
	margin-bottom:12px;
}

.speisekarte-header img{
	max-height:80px;
	max-width:100%;
}

.speisekarte-container h1{
	margin:0;
	color: var(--title-color, #333333);
}

/* Modern Design card in admin */
.design-card{
	background: var(--background-card) !important;
	color: var(--text-primary) !important;
	padding: 16px;
	border-radius:12px;
	box-shadow: var(--shadow-medium) !important;
	border: 1px solid var(--border-color) !important;
}

.design-card .v-card-title{
	color: var(--text-primary) !important;
	font-weight:700;
	letter-spacing:0.2px;
	font-size:1.1rem;
	padding: 8px 0;
	margin-bottom: 12px;
	border-bottom: 1px solid var(--border-color);
	display:flex;
	align-items:center;
	justify-content:space-between;
}

.design-card .v-card-text{
	padding-top:4px;
	color: var(--text-secondary) !important;
}

.design-card .design-controls{
	display:grid;
	grid-template-columns:repeat(2,1fr);
	gap:12px;
}

.design-card .design-controls .v-col{
	padding:0;
}

.design-card .v-text-field,.design-card .v-select,.design-card .v-file-input{
	background:transparent;
}

/* design-item: small card tiles inside the Design card to match product card style */
.design-item{
	background: var(--background-light);
	color: var(--text-primary);
	border-radius:8px;
	padding:12px;
	box-shadow: var(--shadow-light);
	border:1px solid var(--border-color);
	display:flex;
	flex-direction:column;
	gap:8px;
}

.design-item .v-label{
	font-weight:600;
	color: var(--text-secondary) !important;
}

.v-list-item__title{
	color: white;
}

.theme--light.v-list{
	background: var(--background-light)
}

.design-item .v-input__slot{
	background:transparent;
}

/* Design item input fields */
.design-item .v-text-field .v-input__control .v-input__slot {
	background: var(--background-medium) !important;
	border: 1px solid var(--border-color) !important;
}

.design-item .v-text-field .v-input__control .v-input__slot:hover {
	border-color: var(--primary-orange) !important;
}

.design-item .v-text-field input {
	color: var(--text-primary) !important;
}

/* === MODERN ORDERS TABLE STYLES === */

.orders-section {
	padding: 8px 0;
}

.orders-header {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	margin-bottom: 20px;
	padding: 16px 0;
}

.orders-title-section {
	flex: 1;
}

.orders-title {
	margin: 0;
	color: var(--text-primary) !important;
	font-size: 1.8rem;
	font-weight: 600;
	display: flex;
	align-items: center;
	gap: 12px;
}

.orders-subtitle {
	margin: 4px 0 0 0;
	color: var(--text-secondary) !important;
	font-size: 0.95rem;
}

.orders-actions {
	display: flex;
	gap: 8px;
	align-items: center;
}

/* Filter Card */
.filter-card {
	background: var(--background-card) !important;
	border: 1px solid var(--border-color) !important;
	margin-bottom: 16px;
}

.filter-card .v-card-text {
	padding: 16px !important;
}

.search-field .v-input__control,
.status-filter .v-input__control,
.per-page-select .v-input__control {
	background: var(--background-light) !important;
}

.orders-count-chip {
	font-weight: 600 !important;
}

/* Modern Table Card */
.orders-table-card {
	background: var(--background-card) !important;
	border: 1px solid var(--border-color) !important;
	border-radius: 12px !important;
	overflow: hidden;
}

.table-header {
	padding: 20px 24px 16px;
	background: var(--background-medium) !important;
	border-bottom: 1px solid var(--border-color);
}

.table-title {
	margin: 0;
	color: var(--text-primary) !important;
	font-size: 1.2rem;
	font-weight: 600;
	display: flex;
	align-items: center;
	gap: 8px;
}

/* Modern Data Table Styling */
.modern-orders-table {
	background: transparent !important;
}

.modern-orders-table .v-data-table__wrapper {
	background: var(--background-card) !important;
}

.modern-orders-table table {
	background: transparent !important;
}

.modern-orders-table thead th {
	background: var(--background-medium) !important;
	color: var(--text-primary) !important;
	font-weight: 600 !important;
	border-bottom: 2px solid var(--border-color) !important;
	padding: 16px 12px !important;
}

.modern-orders-table tbody tr {
	border-bottom: 1px solid var(--border-color) !important;
	transition: background-color 0.2s ease;
}

.modern-orders-table tbody tr:hover {
	background: rgba(255, 107, 53, 0.05) !important;
	cursor: pointer;
}

.modern-orders-table tbody td {
	padding: 12px !important;
	vertical-align: top;
	color: var(--text-secondary) !important;
}

/* Status Chips */
.status-chip {
	font-weight: 600 !important;
	font-size: 0.75rem !important;
}

/* Table Cell Styling */
.items-cell {
	max-width: 300px;
}

.items-list {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.item-row {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 0.9rem;
}

.item-name {
	font-weight: 500;
	color: var(--text-primary) !important;
}

.item-price {
	margin-left: auto;
	font-weight: 600;
	color: var(--primary-orange) !important;
	font-size: 0.85rem;
}

.more-items {
	margin-top: 4px;
}

.total-cell {
	text-align: right;
}

.total-amount {
	font-size: 1.1rem;
	font-weight: 700;
	color: var(--primary-orange) !important;
}

.customer-cell {
	min-width: 150px;
}

.customer-name {
	font-weight: 600;
	color: var(--text-primary) !important;
	font-size: 0.9rem;
}

.customer-email {
	font-size: 0.8rem;
	color: var(--text-muted) !important;
	margin-top: 2px;
}

.date-cell {
	min-width: 120px;
}

.date-main {
	font-weight: 500;
	color: var(--text-primary) !important;
	font-size: 0.9rem;
}

.date-time {
	font-size: 0.8rem;
	color: var(--text-muted) !important;
	margin-top: 2px;
}

/* Action Buttons */
.action-buttons {
	display: flex;
	gap: 4px;
	justify-content: flex-end;
}

.action-buttons .v-btn {
	transition: all 0.2s ease !important;
}

.action-buttons .v-btn:hover {
	transform: translateY(-1px);
	box-shadow: var(--shadow-light) !important;
}

/* Empty State */
.empty-state {
	text-align: center;
	padding: 48px 24px;
}

.empty-title {
	margin: 16px 0 8px;
	color: var(--text-primary) !important;
	font-weight: 500;
}

.empty-text {
	color: var(--text-secondary) !important;
	margin: 0 0 16px;
	max-width: 400px;
	margin-left: auto;
	margin-right: auto;
}

/* Loading State */
.modern-orders-table .v-data-table__progress {
	background: var(--primary-orange) !important;
}

/* === MODERN ORDER DIALOG STYLES === */

.order-dialog .v-dialog {
	border-radius: 16px !important;
	overflow: hidden;
}

.order-details-card {
	background: var(--background-card) !important;
	color: var(--text-primary) !important;
	border: 1px solid var(--border-color) !important;
	border-radius: 16px !important;
}

/* Header Section */
.order-header {
	background: var(--background-medium) !important;
	color: var(--text-primary) !important;
	padding: 20px 24px !important;
	border-bottom: 1px solid var(--border-color) !important;
}

.order-header-content {
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
}

.order-id-section {
	display: flex;
	align-items: flex-start;
	gap: 12px;
}

.order-title {
	margin: 0 0 8px 0;
	font-size: 1.5rem;
	font-weight: 600;
	color: var(--text-primary) !important;
}

.order-status-row {
	display: flex;
	align-items: center;
	gap: 12px;
}

.order-status-chip {
	font-weight: 600 !important;
}

.order-date {
	color: var(--text-secondary) !important;
	font-size: 0.9rem;
}

.close-btn {
	color: var(--text-secondary) !important;
	transition: all 0.2s ease !important;
}

.close-btn:hover {
	color: var(--primary-orange) !important;
	background: rgba(255, 107, 53, 0.1) !important;
}

/* Content Section */
.order-content {
	padding: 24px !important;
	background: var(--background-card) !important;
}

.info-section {
	margin-bottom: 24px;
}

.section-title {
	margin: 0 0 12px 0;
	font-size: 1.1rem;
	font-weight: 600;
	color: var(--text-primary) !important;
	display: flex;
	align-items: center;
	gap: 8px;
}

.info-card {
	background: var(--background-light) !important;
	border: 1px solid var(--border-color) !important;
	border-radius: 8px;
	padding: 16px;
}

.info-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 8px 0;
	border-bottom: 1px solid var(--border-color);
}

.info-row:last-child {
	border-bottom: none;
	padding-bottom: 0;
}

.info-label {
	font-weight: 500;
	color: var(--text-secondary) !important;
	min-width: 80px;
}

.info-value {
	font-weight: 600;
	color: var(--text-primary) !important;
	text-align: right;
}

/* Total Card Special Styling */
.total-card {
	background: linear-gradient(135deg, var(--primary-orange-dark), var(--primary-orange)) !important;
	border: none !important;
	color: white !important;
}

.total-amount-display {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.total-label {
	font-weight: 500;
	color: rgba(255, 255, 255, 0.9) !important;
	font-size: 1rem;
}

.total-value {
	font-weight: 700;
	color: white !important;
	font-size: 1.4rem;
}

/* Items Grid */
.items-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 12px;
	margin-top: 12px;
}

.item-card {
	background: var(--background-light) !important;
	border: 1px solid var(--border-color) !important;
	border-radius: 8px;
	padding: 12px;
	transition: all 0.2s ease;
}

.item-card:hover {
	border-color: var(--primary-orange) !important;
	box-shadow: var(--shadow-light) !important;
}

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

.item-name {
	font-weight: 600;
	color: var(--text-primary) !important;
	font-size: 0.95rem;
}

.qty-chip {
	font-weight: 600 !important;
	font-size: 0.75rem !important;
}

.item-details {
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: 0.9rem;
}

.item-price {
	color: var(--primary-orange) !important;
	font-weight: 600;
}

.item-total {
	color: var(--text-secondary) !important;
	font-weight: 500;
}

/* Action Footer */
.order-actions {
	background: var(--background-medium) !important;
	padding: 16px 24px !important;
	border-top: 1px solid var(--border-color) !important;
}

.actions-left {
	display: flex;
	gap: 8px;
}

.order-actions .v-btn {
	font-weight: 600 !important;
	text-transform: none !important;
}

/* === RESPONSIVE STYLES === */

@media (max-width:900px){
	.design-card .design-controls{grid-template-columns:repeat(1,1fr)}
	.products-grid.two-per-row{grid-template-columns:repeat(2,minmax(140px,1fr))}
	
	.orders-header {
		flex-direction: column;
		gap: 16px;
		align-items: stretch;
	}
	
	.orders-actions {
		justify-content: flex-start;
	}
	
	.filter-card .v-row {
		flex-direction: column;
	}
	
	.filter-card .v-col {
		padding: 4px 0 !important;
	}
}

@media (max-width:600px){
	.preview-frame{height:400px}
	.products-grid.two-per-row{grid-template-columns:repeat(1,1fr)}
	
	.orders-title {
		font-size: 1.5rem;
	}
	
	.orders-actions {
		flex-direction: column;
		gap: 8px;
	}
	
	.orders-actions .v-btn {
		width: 100%;
	}
	
	.modern-orders-table .v-data-table__wrapper {
		overflow-x: auto;
	}
	
	.items-cell {
		max-width: 200px;
	}
	
	/* Order Dialog Mobile */
	.order-dialog .v-dialog {
		margin: 12px;
		max-height: calc(100vh - 24px);
	}
	
	.order-header-content {
		flex-direction: column;
		gap: 12px;
		align-items: flex-start;
	}
	
	.order-id-section {
		width: 100%;
	}
	
	.order-title {
		font-size: 1.25rem;
	}
	
	.order-status-row {
		flex-direction: column;
		align-items: flex-start;
		gap: 8px;
	}
	
	.items-grid {
		grid-template-columns: 1fr;
	}
	
	.info-row {
		flex-direction: column;
		align-items: flex-start;
		gap: 4px;
	}
	
	.info-value {
		text-align: left;
	}
	
	.total-amount-display {
		flex-direction: column;
		gap: 4px;
		text-align: center;
	}
	
	.actions-left {
		flex-direction: column;
		width: 100%;
	}
	
	.actions-left .v-btn {
		width: 100%;
		margin: 0 0 8px 0 !important;
	}
	
	.order-actions {
		flex-direction: column;
		gap: 12px;
	}
}