/* =================================================================
   ZakoPOS — project styles.
   Loaded LAST so it overrides Tabler / Bootstrap defaults.

   Conventions:
     - Brand colors override Tabler CSS variables (--tblr-*). Change
       the values below to rebrand — no recompilation needed.
     - Dark mode via Bootstrap 5.3 [data-bs-theme="dark"] on <html>.
       theme-boot.js (in <head>) restores the persisted choice before
       first paint; the toggle lives in script.js and writes
       localStorage "tabler-theme".
     - Named utility classes replace inline style="" attributes.
       No `style=""` in views.
   ================================================================= */

/* =================================================================
   Brand colours are NOT defined here — Admin → Settings drives them and
   the BrandStyles view emits the --tblr-primary / .btn-primary variables
   after this file, plus the derived shade scale --brand-50 … --brand-950,
   --brand-accent and --brand-sidebar. Rules below may use those
   variables but never hard-code a brand colour.
   ================================================================= */

:root {
	--avatar-md: 40px;
	--avatar-lg: 100px;
	--input-width-xs: 110px;
	--input-width-sm: 200px;
	--input-width-md: 280px;
	--tables-grid-size: 18px;
}

[data-bs-theme-base="neutral"] {
	--tblr-gray-800: #232326;
	--tblr-gray-900: #19191c;
	--tblr-gray-950: #101013;
}

/* =================================================================
   Sidebar group titles + brand image.
   ================================================================= */

.navbar-vertical .nav-group-title {
	padding: 0.75rem 1rem 0.25rem;
	font-size: 0.625rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--tblr-secondary, #6c7a91);
}

@media (min-width: 992px) {
	.navbar-brand-image {
		height: 3.5rem;
		width: auto;
		margin-top: 1.5rem;
	}
}

/* Sidebar — deep brand shades with a soft top light, rounded links and
   the accent colour on the active item (Tabler draws the left bar). */
.navbar-vertical {
	--tblr-navbar-active-border-color: var(--brand-accent);
	--tblr-navbar-active-bg: rgba(255, 255, 255, 0.07);
	background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.045) 0%, rgba(0, 0, 0, 0.14) 100%);
}

.navbar-vertical[data-bs-theme="dark"] .nav-group-title { color: rgba(255, 255, 255, 0.42); }

@media (min-width: 992px) {
	.navbar-vertical .navbar-nav .nav-link {
		margin: 1px 0.75rem;
		padding-left: 0.75rem;
		padding-right: 0.75rem;
		border-radius: var(--tblr-border-radius);
		transition: background-color 0.12s ease, color 0.12s ease;
	}

	.navbar-vertical .navbar-nav .nav-link:hover { background: rgba(255, 255, 255, 0.04); }

	.navbar-vertical .navbar-nav .nav-item.active > .nav-link { background: var(--tblr-navbar-active-bg); }

	.navbar-vertical .navbar-nav .nav-item.active > .nav-link .nav-link-icon { color: var(--brand-accent); }
}

/* Page header — bolder title, pretitle in the primary colour. */
.page-header .page-title { font-weight: 700; letter-spacing: -0.01em; }

.page-header .page-pretitle { color: var(--tblr-primary); letter-spacing: 0.08em; }

/* =================================================================
   Auth pages (login, register, reset) — brand panel + form.
   The panel is pure CSS: brand shades and a runway centre line.
   ================================================================= */

.auth-shell {
	display: flex;
	flex: 1 1 auto;
	min-height: 100vh;
}

.auth-brand {
	position: relative;
	flex: 0 0 44%;
	max-width: 680px;
	flex-direction: column;
	justify-content: space-between;
	padding: 3rem 3.5rem;
	overflow: hidden;
	color: #f3efe2;
	background:
		radial-gradient(80% 55% at 15% 0%, rgba(var(--brand-accent-rgb), 0.16), transparent 70%),
		radial-gradient(70% 60% at 100% 100%, var(--brand-800), transparent 70%),
		linear-gradient(160deg, var(--brand-900) 0%, var(--brand-950) 100%);
}

.auth-brand-eyebrow {
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--brand-accent);
}

.auth-brand-logo {
	width: min(320px, 70%);
	height: auto;
	margin: 2rem 0;
}

.auth-brand-tagline {
	margin-bottom: 1.25rem;
	font-size: 1rem;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: rgba(243, 239, 226, 0.78);
}

.auth-brand-runway {
	height: 4px;
	border-radius: 2px;
	background: repeating-linear-gradient(90deg, rgba(243, 239, 226, 0.35) 0 34px, transparent 34px 64px);
}

.auth-main {
	display: flex;
	flex: 1 1 auto;
	align-items: center;
	justify-content: center;
	padding: 1.5rem 1rem;
}

.auth-main .container-tight { width: 100%; }

.auth-card { box-shadow: 0 24px 48px -28px rgba(var(--brand-rgb), 0.45); }

/* =================================================================
   Empty states and errors — an icon badge in the brand tint
   instead of an illustration.
   ================================================================= */

.empty .empty-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 4.5rem;
	height: 4.5rem;
	border-radius: 50%;
	background: rgba(var(--tblr-primary-rgb), 0.1);
	color: var(--tblr-primary);
	font-size: 1.75rem;
	line-height: 1;
}

.error-code {
	font-weight: 700;
	letter-spacing: -0.03em;
	color: var(--tblr-primary);
}

/* =================================================================
   Admin → Settings: the derived shade scale.
   ================================================================= */

.brand-swatches {
	display: flex;
	flex-wrap: wrap;
	gap: 0.375rem;
}

.brand-swatch {
	display: flex;
	align-items: flex-end;
	width: 3.25rem;
	height: 3.25rem;
	padding: 0.25rem;
	border-radius: var(--tblr-border-radius);
	border: 1px solid var(--tblr-border-color-translucent);
	font-size: 0.625rem;
	font-weight: 600;
}

.brand-swatch-step { opacity: 0.85; }

.brand-swatch-50 { background: var(--brand-50); color: var(--brand-900); }
.brand-swatch-100 { background: var(--brand-100); color: var(--brand-900); }
.brand-swatch-200 { background: var(--brand-200); color: var(--brand-900); }
.brand-swatch-300 { background: var(--brand-300); color: var(--brand-950); }
.brand-swatch-400 { background: var(--brand-400); color: var(--brand-950); }
.brand-swatch-500 { background: var(--brand-500); color: #ffffff; }
.brand-swatch-600 { background: var(--brand-600); color: #ffffff; }
.brand-swatch-700 { background: var(--brand-700); color: #ffffff; }
.brand-swatch-800 { background: var(--brand-800); color: #ffffff; }
.brand-swatch-900 { background: var(--brand-900); color: #ffffff; }
.brand-swatch-950 { background: var(--brand-950); color: #ffffff; }
.brand-swatch-accent { width: auto; min-width: 3.25rem; background: var(--brand-accent); color: var(--brand-accent-fg); }

/* =================================================================
   Named utility classes — sweep targets for inline `style=""`.
   ================================================================= */

.w-input-xs { width: var(--input-width-xs); }
.w-input-sm { width: var(--input-width-sm); }
.w-input-md { width: var(--input-width-md); }
.form-select-auto { width: auto; }

.avatar-square-md {
	width: var(--avatar-md);
	height: var(--avatar-md);
	object-fit: cover;
}

.avatar-circle-lg {
	width: var(--avatar-lg);
	height: var(--avatar-lg);
	object-fit: cover;
}

.account-cover {
	height: 100px;
	border-radius: var(--tblr-border-radius, 0.5rem) var(--tblr-border-radius, 0.5rem) 0 0;
}

.account-body-offset { margin-top: -60px; }


.lang-flag { height: 1.25rem; width: auto; }
.lang-flag-sm { height: 1rem; width: auto; }
.auth-logo { height: 3.5rem; width: auto; }
.navbar-logo { height: 2rem; width: auto; }

/* Text fallback when no logo is configured in Settings. */
.brand-text { font-weight: 700; letter-spacing: -0.02em; white-space: nowrap; }
.navbar-brand-text { font-size: 1.35rem; line-height: 1; margin-top: 1.5rem; }
@media (max-width: 991.98px) { .navbar-brand-text { margin-top: 0; font-size: 1.15rem; } }

.cursor-pointer { cursor: pointer; }
.cursor-grab { cursor: grab; }
.text-strike { text-decoration: line-through; }
.thumb-sm { width: 40px; height: 40px; object-fit: cover; }
.thumb-md { width: 64px; height: 64px; object-fit: cover; }
.thumb-lg { width: 100%; height: 100px; object-fit: cover; }
.mh-60 { max-height: 60vh; overflow-y: auto; overflow-x: hidden; }
.hidden { display: none; }

/* =================================================================
   POS action bar — big stacked buttons with an Alt+N key badge.
     <div class="pos-actions">
       <a class="btn pos-action text-primary" data-shortcut="ALT+2">
         <span class="pos-action-key badge bg-primary-lt">Alt+2</span>
         <span class="fas fa-receipt pos-action-icon"></span>
         <span class="pos-action-label">Orders</span>
       </a>
   ================================================================= */

.pos-actions {
	display: flex;
	gap: 0.5rem;
	flex-wrap: wrap;
}

.pos-actions form { display: flex; flex: 1 1 7rem; min-width: 0; }

.btn.pos-action {
	flex: 1 1 7rem;
	min-width: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	padding: 0;
	overflow: hidden;
	height: auto;
	line-height: 1.2;
}

.pos-action-key {
	display: block;
	width: 100%;
	border-radius: 0;
	font-size: 0.625rem;
	padding: 0.15rem 0;
	letter-spacing: 0.04em;
}

.pos-action-icon {
	font-size: 1.5rem;
	margin-top: 0.5rem;
}

.pos-action-label {
	display: block;
	padding: 0.25rem 0.5rem 0.6rem;
	font-size: 0.8125rem;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 100%;
}

@media (max-width: 767.98px) {
	.pos-action-icon { font-size: 1.15rem; margin-top: 0.35rem; }
	.pos-action-label { font-size: 0.7rem; padding-bottom: 0.4rem; }
}

/* =================================================================
   Floor (BarDashboard) — table tiles and section tabs.
   ================================================================= */

.bar-section-tabs .nav-link {
	padding: 0.75rem 1.5rem;
	font-size: 1.05rem;
}

.table-card {
	display: block;
	text-align: center;
	height: 100%;
	color: inherit;
	transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.table-card:hover {
	transform: translateY(-2px);
	box-shadow: var(--tblr-shadow, 0 4px 12px rgba(0, 0, 0, 0.12));
	color: inherit;
}

.table-card-occupied {
	border-color: var(--tblr-primary);
	background: var(--tblr-primary-lt);
}

.pos-clock {
	font-variant-numeric: tabular-nums;
	font-weight: 600;
	font-size: 1.25rem;
	line-height: 1;
}

/* =================================================================
   Order screen.
   ================================================================= */

.order-item-picture { width: 40px; height: 40px; object-fit: cover; }
.order-item-quantity { width: 100px; }
.order-item-sort-handle { cursor: grab; }
.order-item-sort-handle:active { cursor: grabbing; }
.order-item.ui-sortable-helper { opacity: 0.9; }

.product-tile {
	display: block;
	width: 100%;
	text-align: left;
	padding: 0;
	height: 100%;
}

.product-tile-img { width: 100%; height: 100px; object-fit: cover; }

.category-panel > .card-header { cursor: pointer; }

/* jQuery UI autocomplete (product search) — above modals, theme-aware. */
.ui-autocomplete {
	z-index: 2000 !important;
	max-height: 360px;
	overflow-y: auto;
	background: var(--tblr-bg-surface);
	border: 1px solid var(--tblr-border-color);
	border-radius: var(--tblr-border-radius);
	box-shadow: var(--tblr-shadow-dropdown, 0 4px 12px rgba(0, 0, 0, 0.12));
	padding: 0.25rem 0;
}

.ui-autocomplete .ui-menu-item-wrapper {
	padding: 0.4rem 0.75rem;
	color: var(--tblr-body-color);
	border: 0;
	margin: 0;
	background: transparent;
	font-weight: normal;
}

.ui-autocomplete .ui-menu-item-wrapper.ui-state-active {
	background: var(--tblr-active-bg);
	color: var(--tblr-body-color);
}

.autocomplete-avatar {
	width: 40px;
	height: 40px;
	line-height: 40px;
	text-align: center;
	display: inline-block;
	border-radius: 50%;
}

.ui-helper-hidden-accessible { display: none; }

/* =================================================================
   Passcode keypad.
   ================================================================= */

.passcode-dots { min-height: 50px; }

.passcode-dot {
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background-color: var(--tblr-primary);
	display: inline-block;
	animation: passcode-dot-in 0.15s ease-out;
}

@keyframes passcode-dot-in {
	from { transform: scale(0); opacity: 0; }
	to { transform: scale(1); opacity: 1; }
}

.passcode-key { font-size: 1.5rem; font-weight: 700; padding-top: 1rem; padding-bottom: 1rem; }
.passcode-key:active { transform: scale(0.95); }

/* =================================================================
   Restaurant table floor-plan (drag-and-drop editor).
   ================================================================= */

.tables-layout-container {
	position: relative;
	min-height: 70vh;
	width: 100%;
	overflow: hidden;
	border: 1px dashed var(--tblr-border-color);
	border-radius: var(--tblr-border-radius);
	background-color: var(--tblr-bg-surface-secondary);
}

.tables-layout-container[data-editable="1"] {
	background-image:
		linear-gradient(var(--tblr-border-color-translucent) 1px, transparent 1px),
		linear-gradient(90deg, var(--tblr-border-color-translucent) 1px, transparent 1px);
	background-size: var(--tables-grid-size) var(--tables-grid-size);
}

.tables-layout-item { position: absolute; width: 220px; cursor: grab; z-index: 1; }
.tables-layout-container[data-editable="0"] .tables-layout-item { cursor: default; }
.tables-layout-item:active { cursor: grabbing; }
.tables-layout-item.ui-draggable-dragging { z-index: 50; }

/* =================================================================
   Dropzone uploaders — follow the Tabler surface/border colours.
   ================================================================= */

.uploader.dropzone {
	border: 2px dashed var(--tblr-border-color);
	border-radius: var(--tblr-border-radius);
	background: var(--tblr-bg-surface);
	min-height: 120px;
	padding: 1rem;
}

.uploader.dropzone .dz-message {
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0.5rem 0;
	text-align: left;
}

.dz-preview { margin: 7px; }
.dropzone .dz-preview .dz-image { border-radius: var(--tblr-border-radius); }

/* =================================================================
   flatpickr — brand the picker and follow the Tabler theme.
   ================================================================= */

.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange,
.flatpickr-day.selected:hover,
.flatpickr-day.startRange:hover,
.flatpickr-day.endRange:hover {
	background: var(--tblr-primary);
	border-color: var(--tblr-primary);
}

.fp-presets { max-width: 100%; }

[data-bs-theme="dark"] .flatpickr-calendar {
	background: var(--tblr-bg-surface, #182433);
	box-shadow: 0 3px 13px rgba(0, 0, 0, 0.45);
}

[data-bs-theme="dark"] .flatpickr-calendar.arrowTop:after,
[data-bs-theme="dark"] .flatpickr-calendar.arrowTop:before { border-bottom-color: var(--tblr-bg-surface, #182433); }

[data-bs-theme="dark"] .flatpickr-calendar.arrowBottom:after,
[data-bs-theme="dark"] .flatpickr-calendar.arrowBottom:before { border-top-color: var(--tblr-bg-surface, #182433); }

[data-bs-theme="dark"] .flatpickr-months .flatpickr-month,
[data-bs-theme="dark"] .flatpickr-months .flatpickr-prev-month,
[data-bs-theme="dark"] .flatpickr-months .flatpickr-next-month,
[data-bs-theme="dark"] .flatpickr-current-month .flatpickr-monthDropdown-months,
[data-bs-theme="dark"] .flatpickr-current-month input.cur-year,
[data-bs-theme="dark"] span.flatpickr-weekday,
[data-bs-theme="dark"] .flatpickr-day,
[data-bs-theme="dark"] .flatpickr-time input,
[data-bs-theme="dark"] .flatpickr-time .flatpickr-time-separator,
[data-bs-theme="dark"] .flatpickr-time .flatpickr-am-pm {
	color: var(--tblr-body-color, #dce1e7);
	fill: var(--tblr-body-color, #dce1e7);
}

[data-bs-theme="dark"] .flatpickr-day.prevMonthDay,
[data-bs-theme="dark"] .flatpickr-day.nextMonthDay,
[data-bs-theme="dark"] .flatpickr-day.flatpickr-disabled { color: var(--tblr-secondary, #6c7a91); }

[data-bs-theme="dark"] .flatpickr-day:hover,
[data-bs-theme="dark"] .flatpickr-day.today:hover {
	background: var(--tblr-active-bg, #1f2e41);
	border-color: transparent;
}

[data-bs-theme="dark"] .flatpickr-day.selected,
[data-bs-theme="dark"] .flatpickr-day.startRange,
[data-bs-theme="dark"] .flatpickr-day.endRange {
	background: var(--tblr-primary);
	border-color: var(--tblr-primary);
	color: #ffffff;
}

[data-bs-theme="dark"] .flatpickr-time,
[data-bs-theme="dark"] .flatpickr-innerContainer { border-color: var(--tblr-border-color, #243049); }

/* =================================================================
   Confirm popover + global toast.
   ================================================================= */

.zo-confirm-popover .popover-body { min-width: 220px; }

.zo-confirm-popover .zo-confirm-actions {
	display: flex;
	gap: 0.5rem;
	margin-top: 0.5rem;
}

#zo-toast {
	position: fixed;
	bottom: 1rem;
	right: 1rem;
	z-index: 1100;
	padding: 0.75rem 1rem;
	border-radius: 0.5rem;
	background: var(--tblr-primary, var(--brand));
	color: #fff;
	box-shadow: 0 4px 18px rgba(0, 0, 0, 0.18);
	opacity: 0;
	transform: translateY(8px);
	transition: opacity 0.18s ease, transform 0.18s ease;
	pointer-events: none;
}

#zo-toast.show { opacity: 1; transform: translateY(0); }

/* =================================================================
   Pagination — icon arrows the same height as digits.
   ================================================================= */

.pagination .page-link {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 2.25rem;
	line-height: 1.4285714286;
}

/* =================================================================
   Searchable selects (TomSelect) — map the Bootstrap vars it expects
   onto Tabler ones, and pin filter-bar widths.
   ================================================================= */

.ts-wrapper,
.ts-dropdown {
	--bs-body-bg: var(--tblr-bg-forms);
	--bs-body-color: var(--tblr-body-color);
	--bs-border-color: var(--tblr-border-color);
	--bs-border-color-translucent: var(--tblr-border-color-translucent);
	--bs-border-width: var(--tblr-border-width);
	--bs-border-radius: var(--tblr-border-radius);
	--bs-border-radius-sm: var(--tblr-border-radius-sm);
	--bs-border-radius-lg: var(--tblr-border-radius-lg);
	--bs-secondary-bg: var(--tblr-bg-surface-secondary);
	--bs-tertiary-bg: var(--tblr-bg-surface-secondary);
	--bs-form-invalid-color: var(--tblr-danger);
	--bs-form-valid-color: var(--tblr-success);
}

.ts-dropdown { border: var(--tblr-border-width) solid var(--tblr-border-color); }
.ts-dropdown .optgroup-header { color: var(--tblr-secondary); background: transparent; }
.ts-dropdown .no-results,
.ts-dropdown .create { color: var(--tblr-secondary); }

.ts-wrapper.form-select.focus,
.ts-wrapper.form-control.focus { border-color: var(--tblr-primary); }

.ts-wrapper.form-select .ts-control {
	padding: 0.5625rem 1rem;
	font-size: 0.875rem;
	line-height: 1.25rem;
}

.ts-wrapper.form-select { width: 100%; }

.ts-wrapper.form-select.form-select-auto {
	width: var(--input-width-md);
	flex: 0 0 var(--input-width-md);
}

.ts-wrapper.single .ts-control > .item {
	display: block;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.ts-dropdown {
	min-width: 100%;
	width: max-content;
	max-width: min(34rem, 90vw);
}

/* =================================================================
   Print.
   ================================================================= */

@media print {
	.navbar, .page-header, .footer, .pos-actions, .d-print-none { display: none !important; }
}

/* =================================================================
   Order screen — close-order modal invoice search dropdown
   ================================================================= */

.invoice-search-results { z-index: 1080; max-height: 240px; overflow-y: auto; }

/* =================================================================
   Catalog.
   ================================================================= */

/* Composite product recipe rows: keep the quantity box and remove button at their
   natural width so the ingredient select takes the remaining space. */
.ingredient-row .ingredient-quantity,
.ingredient-row .remove-ingredient-row { flex: 0 0 auto; }