:root {
	--brand: #7c3aed;
	--brand-dark: #5b21b6;
	--brand-soft: #ede9fe;
	--side-from: #2e1065;
	--side-to: #4c1d95;
	--page-bg: #f5f3ff;
	--bs-primary: #7c3aed;
	--bs-primary-rgb: 124, 58, 237;
	--bs-primary-bg-subtle: #ede9fe;
	--bs-primary-text-emphasis: #4c1d95;
	--bs-link-color: #6d28d9;
	--bs-link-hover-color: #5b21b6;
	--bs-link-color-rgb: 109, 40, 217;
	--bs-link-hover-color-rgb: 91, 33, 182;
	--bs-body-font-family: "Inter", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
}

body { background: var(--page-bg); color: #1f2937; font-size: 0.93rem; }

.btn-primary {
	--bs-btn-bg: var(--brand); --bs-btn-border-color: var(--brand);
	--bs-btn-hover-bg: var(--brand-dark); --bs-btn-hover-border-color: var(--brand-dark);
	--bs-btn-active-bg: var(--brand-dark); --bs-btn-active-border-color: var(--brand-dark);
	--bs-btn-disabled-bg: var(--brand); --bs-btn-disabled-border-color: var(--brand);
}
.btn-outline-primary {
	--bs-btn-color: var(--brand); --bs-btn-border-color: var(--brand);
	--bs-btn-hover-bg: var(--brand); --bs-btn-hover-border-color: var(--brand);
	--bs-btn-active-bg: var(--brand-dark); --bs-btn-active-border-color: var(--brand-dark);
}
.form-control:focus, .form-select:focus {
	border-color: #a78bfa; box-shadow: 0 0 0 .2rem rgba(124, 58, 237, .18);
}
.form-check-input:checked { background-color: var(--brand); border-color: var(--brand); }

/* Layout */
.app { display: flex; min-height: 100vh; }
.sidebar {
	width: 250px; flex: 0 0 250px; color: #ddd6fe;
	background: linear-gradient(180deg, var(--side-from), var(--side-to));
	position: sticky; top: 0; height: 100vh; overflow-y: auto; padding-bottom: 24px;
}
.brand {
	display: flex; align-items: center; gap: 10px; padding: 20px 22px;
	color: #fff; font-weight: 700; font-size: 1.15rem; text-decoration: none;
}
.brand-icon {
	width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center;
	background: linear-gradient(135deg, #a78bfa, #7c3aed); font-size: 1.2rem;
}
.side-nav { padding: 0 12px; }
.nav-group {
	text-transform: uppercase; font-size: .68rem; letter-spacing: .08em;
	color: #a78bfa; padding: 16px 12px 6px;
}
.side-nav .nav-link {
	display: flex; align-items: center; gap: 10px; color: #ddd6fe;
	padding: 9px 12px; border-radius: 10px; margin-bottom: 2px;
}
.side-nav .nav-link:hover { background: rgba(255, 255, 255, .08); color: #fff; }
.side-nav .nav-link.active { background: #fff; color: var(--brand-dark); font-weight: 600; }
.side-nav .nav-link i { font-size: 1.05rem; }

.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.topbar {
	display: flex; align-items: center; gap: 12px; padding: 14px 26px;
	background: #fff; border-bottom: 1px solid #ede9fe; position: sticky; top: 0; z-index: 20;
}
.page-title { font-size: 1.15rem; font-weight: 700; margin: 0; color: #2e1065; }
.user-chip { display: flex; align-items: center; gap: 8px; color: #1f2937; text-decoration: none; }
.avatar {
	width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
	background: var(--brand); color: #fff; font-weight: 700;
}
.content { padding: 24px 26px; flex: 1; }
.foot { padding: 14px 26px; color: #8b86a3; font-size: .8rem; text-align: center; }

/* Cards */
.card { border: 0; border-radius: 16px; box-shadow: 0 2px 12px rgba(76, 29, 149, .07); }
.card-header { background: transparent; border-bottom: 1px solid #f1edff; font-weight: 600; padding: 14px 18px; }
.table > :not(caption) > * > * { padding: .7rem .9rem; }
.table thead th {
	background: #faf8ff; color: #5b21b6; font-size: .76rem; text-transform: uppercase;
	letter-spacing: .04em; border-bottom: 1px solid #ede9fe; white-space: nowrap;
}
.table-hover tbody tr:hover { background: #faf7ff; }

.stat-card { padding: 18px; display: flex; align-items: center; gap: 14px; }
.stat-icon {
	width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center;
	font-size: 1.4rem; background: var(--brand-soft); color: var(--brand);
}
.stat-value { font-size: 1.35rem; font-weight: 700; line-height: 1.1; color: #2e1065; }
.stat-label { color: #7c7a92; font-size: .8rem; }

.btn-icon { padding: .25rem .5rem; }
.row-actions { white-space: nowrap; text-align: right; }
.row-actions form { display: inline; }

.sidebar-backdrop { display: none; }
@media (max-width: 991.98px) {
	.sidebar { position: fixed; left: -260px; z-index: 40; transition: left .2s; }
	.sidebar.open { left: 0; }
	.sidebar-backdrop.show { display: block; position: fixed; inset: 0; background: rgba(0, 0, 0, .4); z-index: 30; }
	.content { padding: 16px; }
	.topbar { padding: 12px 16px; }
}

/* Login */
.login-wrap {
	min-height: 100vh; display: grid; place-items: center; padding: 20px;
	background: radial-gradient(circle at 20% 20%, #7c3aed 0, #4c1d95 45%, #2e1065 100%);
}
.login-card { width: 100%; max-width: 410px; border-radius: 22px; padding: 34px; background: #fff; box-shadow: 0 25px 60px rgba(0, 0, 0, .35); }
.login-logo {
	width: 62px; height: 62px; border-radius: 18px; margin: 0 auto 14px; display: grid; place-items: center;
	background: linear-gradient(135deg, #a78bfa, #7c3aed); color: #fff; font-size: 1.9rem;
}

/* POS */
.pos-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.pos-item {
	background: #fff; border: 1px solid #ede9fe; border-radius: 14px; padding: 14px; text-align: left;
	cursor: pointer; transition: .15s;
}
.pos-item:hover { border-color: var(--brand); box-shadow: 0 6px 18px rgba(124, 58, 237, .18); transform: translateY(-2px); }
.pos-item.out { opacity: .45; pointer-events: none; }
.pos-name { font-weight: 600; margin-bottom: 4px; }
.pos-price { color: var(--brand-dark); font-weight: 700; }
.pos-cart { position: sticky; top: 76px; }
.qty-btn { width: 26px; height: 26px; padding: 0; line-height: 1; }

/* Timetable */
.tt-day { border-radius: 14px; background: #fff; box-shadow: 0 2px 12px rgba(76, 29, 149, .07); overflow: hidden; height: 100%; }
.tt-head { background: linear-gradient(135deg, #7c3aed, #5b21b6); color: #fff; padding: 10px 14px; font-weight: 600; }
.tt-slot { padding: 10px 14px; border-bottom: 1px solid #f1edff; }
.tt-slot:last-child { border-bottom: 0; }
.tt-time { color: var(--brand-dark); font-weight: 600; font-size: .82rem; }

/* Invoice / receipt */
.invoice { background: #fff; border-radius: 16px; padding: 34px; max-width: 820px; margin: 0 auto; }
.receipt { background: #fff; width: 320px; margin: 0 auto; padding: 18px; font-family: "Courier New", monospace; font-size: .82rem; }
@media print {
	.sidebar, .topbar, .foot, .no-print, .alert { display: none !important; }
	.content { padding: 0; }
	body { background: #fff; }
	.invoice, .receipt { box-shadow: none; }
}