/*
 * Bootstrap 3 -> 5 compatibility shim.
 *
 * Lets the existing Koktl Business Suite markup that still uses BS3 helper classes
 * (.has-error, .help-block, .label-success, .pull-right, etc.) keep
 * rendering correctly on Bootstrap 5 without rewriting every form.
 */

/* ---------- form-horizontal labels (col-form-label parity) ---------- */
.form-horizontal .control-label {
	padding-top: calc(0.375rem + 1px);
	padding-bottom: calc(0.375rem + 1px);
	margin-bottom: 0;
	font-weight: 500;
	text-align: right;
}
@media (max-width: 575.98px) {
	.form-horizontal .control-label { text-align: left; }
}
.control-label { font-weight: 500; }

/* ---------- BS3 form validation classes ---------- */
.has-error .form-control,
.has-error .form-select { border-color: #dc3545; }
.has-error .form-control:focus,
.has-error .form-select:focus {
	border-color: #dc3545;
	box-shadow: 0 0 0 0.25rem rgba(220,53,69,.25);
}
.has-error .control-label,
.has-error .form-label,
.has-error .help-block,
.has-error .text-danger { color: #dc3545; }

.has-success .form-control,
.has-success .form-select { border-color: #198754; }
.has-success .form-control:focus,
.has-success .form-select:focus {
	border-color: #198754;
	box-shadow: 0 0 0 0.25rem rgba(25,135,84,.25);
}
.has-success .control-label,
.has-success .form-label { color: #198754; }

.help-block {
	display: block;
	margin-top: 0.25rem;
	margin-bottom: 0.5rem;
	font-size: 0.875em;
	color: #6c757d;
}

/* ---------- form-group spacing (BS5 dropped it) ---------- */
.form-group { margin-bottom: 1rem; }
.form-horizontal .form-group {
	display: flex;
	flex-wrap: wrap;
	margin-right: calc(var(--bs-gutter-x, 1.5rem) * -.5);
	margin-left: calc(var(--bs-gutter-x, 1.5rem) * -.5);
}
.form-horizontal .form-group > [class*="col-"] {
	padding-right: calc(var(--bs-gutter-x, 1.5rem) * .5);
	padding-left: calc(var(--bs-gutter-x, 1.5rem) * .5);
}

/* ---------- BS3 column offset shorthands ---------- */
.col-xs-offset-1, .col-sm-offset-1, .col-md-offset-1, .col-lg-offset-1 { margin-left: 8.33333333%; }
.col-xs-offset-2, .col-sm-offset-2, .col-md-offset-2, .col-lg-offset-2 { margin-left: 16.66666667%; }
.col-xs-offset-3, .col-sm-offset-3, .col-md-offset-3, .col-lg-offset-3 { margin-left: 25%; }
.col-xs-offset-4, .col-sm-offset-4, .col-md-offset-4, .col-lg-offset-4 { margin-left: 33.33333333%; }
.col-xs-offset-5, .col-sm-offset-5, .col-md-offset-5, .col-lg-offset-5 { margin-left: 41.66666667%; }
.col-xs-offset-6, .col-sm-offset-6, .col-md-offset-6, .col-lg-offset-6 { margin-left: 50%; }

/* ---------- pull / center helpers (BS3) ---------- */
.pull-right { float: right !important; }
.pull-left  { float: left !important; }
.center-block { display: block; margin-right: auto; margin-left: auto; }

/* ---------- BS3 contextual labels mapped to BS5 badge palette ---------- */
.label {
	display: inline-block;
	padding: .35em .65em;
	font-size: .75em;
	font-weight: 700;
	line-height: 1;
	color: #fff;
	text-align: center;
	white-space: nowrap;
	vertical-align: baseline;
	border-radius: .375rem;
}
.label-default { background-color: #6c757d; }
.label-primary { background-color: #0d6efd; }
.label-success { background-color: #198754; }
.label-info    { background-color: #0dcaf0; color: #000; }
.label-warning { background-color: #ffc107; color: #000; }
.label-danger  { background-color: #dc3545; }

/* ---------- BS3 text helpers used in tables ---------- */
.text-right { text-align: right !important; }
.text-left  { text-align: left !important; }

/* ---------- form-control-static -> plaintext-ish display ---------- */
.form-control-static {
	display: block;
	padding-top: 0.375rem;
	padding-bottom: 0.375rem;
	margin-bottom: 0;
	min-height: calc(1.5em + 0.75rem + 2px);
	line-height: 1.5;
	color: #212529;
	background-color: transparent;
	border: solid transparent;
	border-width: 1px 0;
}

/* ---------- thumbnail (BS3) ---------- */
.thumbnail {
	display: block;
	padding: 4px;
	margin-bottom: 20px;
	line-height: 1.42857143;
	background-color: #fff;
	border: 1px solid #dee2e6;
	border-radius: 0.375rem;
}

/* ---------- BS3 btn-default -> BS5 btn-secondary appearance ---------- */
.btn-default {
	color: #212529;
	background-color: #f8f9fa;
	border-color: #dee2e6;
}
.btn-default:hover, .btn-default:focus {
	color: #212529;
	background-color: #e9ecef;
	border-color: #ced4da;
}

/* ---------- modal stacking (lightbox over View Order) ---------- */
.modal-backdrop.ks-lightbox-backdrop.show { opacity: .85; background: #000; }

/* ---------- breadcrumb (BS5 doesn't auto-show separators in same colour) ---------- */
.breadcrumb { background-color: #f8f9fa; padding: .75rem 1rem; border-radius: .375rem; margin-bottom: 1rem; }

/* ---------- legacy ".panel-default" / ".panel-info" fallback if any escapes ---------- */
.panel { background-color: #fff; border: 1px solid #dee2e6; border-radius: .375rem; margin-bottom: 1rem; }
.panel > .panel-heading { padding: .75rem 1.25rem; background-color: #f8f9fa; border-bottom: 1px solid #dee2e6; border-top-left-radius: .375rem; border-top-right-radius: .375rem; }
.panel > .panel-body { padding: 1.25rem; }
.panel > .panel-footer { padding: .75rem 1.25rem; background-color: #f8f9fa; border-top: 1px solid #dee2e6; }
.panel-title { margin-bottom: 0; font-size: 1.1rem; }

/* ---------- nav-tabs legacy markup (li > a) compatibility ---------- */
.nav-tabs > li > a {
	display: block;
	padding: .5rem 1rem;
	color: var(--bs-nav-link-color);
	text-decoration: none;
	margin-bottom: -1px;
	border: 1px solid transparent;
	border-top-left-radius: .25rem;
	border-top-right-radius: .25rem;
}
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
	color: #495057;
	background-color: #fff;
	border-color: #dee2e6 #dee2e6 #fff;
}
.nav-tabs > li > a:hover { border-color: #e9ecef #e9ecef #dee2e6; }
.nav > li.active > a { font-weight: 500; }

/* ---------- breadcrumb legacy markup support ---------- */
.breadcrumb > li + li::before {
	display: inline-block;
	padding-right: .5rem;
	padding-left: .5rem;
	color: #6c757d;
	content: "/";
}
.breadcrumb > li { display: inline-block; }
.breadcrumb > li.active { color: #6c757d; }

/* ---------- BS3 .alert legacy support (close button) ---------- */
.alert .close {
	float: right;
	font-size: 1.25rem;
	font-weight: 700;
	line-height: 1;
	color: inherit;
	background: transparent;
	border: 0;
	opacity: .5;
	cursor: pointer;
}
.alert .close:hover { opacity: .9; }

/* ---------- modal-dialog vertical centering on lg/xl modals ---------- */
.modal-dialog.modal-lg { max-width: 800px; }

/* ---------- spacing tweaks for breadcrumb/page-heading ---------- */
.page-heading { font-size: 1.15rem; font-weight: 600; }

/* ---------- navbar-brand image fills the navbar height ---------- */
/* The brand sits inside .navbar > .container, which has no explicit height,
   so the brand image itself dictates the navbar height. We give it a tall
   max-height (the visual "box") and let the image scale proportionally
   inside it via object-fit:contain, capped on width so a panoramic logo
   can't push the menu off the page. */
.navbar > .container,
.navbar > .container-fluid { align-items: stretch; }
.navbar-brand {
  display: flex;
  align-items: center;
  padding-top: 0;
  padding-bottom: 0;
}
.navbar-brand img {
  max-height: 64px;
  max-width: 320px;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}

/* ---------- navbar active state on legacy <li class="nav-item active"> ---------- */
.navbar-nav > .nav-item.active > .nav-link,
.navbar-nav > .nav-item.active > .nav-link:hover,
.navbar-nav > .nav-item.active > .nav-link:focus {
	color: var(--bs-navbar-active-color, rgba(0,0,0,.9));
	font-weight: 600;
}
.dropdown-menu > li.active > .dropdown-item,
.dropdown-menu > li.active > .dropdown-item:hover,
.dropdown-menu > li.active > .dropdown-item:focus {
	color: #fff;
	background-color: var(--bs-primary, #0d6efd);
}

/* ---------- legacy BS3 dropdown items: <li><a>...</a></li> without .dropdown-item ---------- */
.dropdown-menu > li > a:not(.dropdown-item) {
	display: block;
	width: 100%;
	padding: .375rem 1rem;
	clear: both;
	font-weight: 400;
	color: #212529;
	text-align: inherit;
	text-decoration: none;
	white-space: nowrap;
	background-color: transparent;
	border: 0;
	cursor: pointer;
}
.dropdown-menu > li > a:not(.dropdown-item):hover,
.dropdown-menu > li > a:not(.dropdown-item):focus {
	color: #1e2125;
	background-color: #e9ecef;
}

/* ---------- BS3 button .active visual state ---------- */
.btn.active, .btn:active { font-weight: 500; }

/* ---------- BS3 .row-fluid (only seen in older builds, harmless if unused) ---------- */
.row-fluid { display: flex; flex-wrap: wrap; margin-right: -.75rem; margin-left: -.75rem; }
.row-fluid > [class*="col-"] { padding-right: .75rem; padding-left: .75rem; }

/* ---------- jQuery UI datepicker visual harmony with BS5 inputs ---------- */
.ui-datepicker { font-family: var(--bs-body-font-family); }
.hasDatepicker { background-color: #fff; }

/* ---------- BS3 visible-/hidden-* helper shims ---------- */
@media (max-width: 767.98px) {
	.hidden-xs { display: none !important; }
	.visible-xs { display: block !important; }
	.visible-xs-inline { display: inline !important; }
	.visible-xs-inline-block { display: inline-block !important; }
}
@media (min-width: 768px) and (max-width: 991.98px) {
	.hidden-sm { display: none !important; }
	.visible-sm { display: block !important; }
}
@media (min-width: 992px) and (max-width: 1199.98px) {
	.hidden-md { display: none !important; }
	.visible-md { display: block !important; }
}
@media (min-width: 1200px) {
	.hidden-lg { display: none !important; }
	.visible-lg { display: block !important; }
}

/* ============================================================================
 * POS Add-Order layout (orders.php?o=add) — cashier & mobile friendly
 * ============================================================================ */

/* Layout container — leave room at the bottom for the sticky footer on mobile. */
.pos-form { padding-bottom: 96px; }
@media (min-width: 992px) {
	.pos-form { padding-bottom: 0; }
}

/* ---- Catalog (search + chips + tiles) ---- */
.pos-catalog .pos-search-bar {
	position: sticky;
	top: 56px; /* under the navbar */
	z-index: 5;
	background: var(--bs-body-bg, #fff);
	padding: .5rem 0;
}
.pos-catalog .pos-search-bar .input-group-text { background: #f8f9fa; }
.pos-catalog .pos-search-bar input[type="search"] {
	font-size: 1.05rem;
	min-height: 48px;
}
.pos-shortcut-hint {
	font-size: .7rem;
	font-weight: 700;
	color: #6c757d;
	background: #e9ecef;
	border-radius: .25rem;
	padding: 1px 6px;
	margin-left: 6px;
	letter-spacing: .03em;
}

.pos-filters {
	display: flex;
	flex-wrap: wrap;
	gap: .35rem;
	margin-top: .5rem;
}
.pos-chip {
	display: inline-flex;
	align-items: center;
	gap: .35rem;
	padding: .25rem .6rem;
	font-size: .85rem;
	border: 1px solid #dee2e6;
	background: #fff;
	color: #495057;
	border-radius: 999px;
	cursor: pointer;
	transition: background .12s ease, color .12s ease, border-color .12s ease;
}
.pos-chip:hover { background: #f1f3f5; }
.pos-chip.active {
	background: #0d6efd;
	color: #fff;
	border-color: #0d6efd;
}
.pos-chip-all { font-weight: 600; }

.pos-tiles-status { padding: 1.5rem .5rem; }

.pos-tiles {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	gap: .5rem;
	margin-top: .5rem;
}
@media (max-width: 575.98px) {
	.pos-tiles { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
}

.pos-tile {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	min-height: 180px;
	padding: .5rem;
	background: #fff;
	border: 1px solid #e9ecef;
	border-radius: .5rem;
	cursor: pointer;
	text-align: left;
	transition: transform .08s ease, box-shadow .12s ease, border-color .12s ease;
}
.pos-tile:hover { border-color: #adb5bd; box-shadow: 0 2px 8px rgba(0,0,0,.06); }
.pos-tile:active { transform: scale(.98); }
.pos-tile.pos-tile-tap {
	border-color: #198754;
	box-shadow: 0 0 0 3px rgba(25,135,84,.25);
}
.pos-tile-img-wrap {
	width: 100%;
	aspect-ratio: 1 / 1;
	background: #f8f9fa;
	border-radius: .375rem;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: .4rem;
}
.pos-tile-img { width: 100%; height: 100%; object-fit: cover; }
.pos-tile-name {
	font-size: .85rem;
	font-weight: 600;
	color: #212529;
	line-height: 1.2;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	margin-bottom: .25rem;
	min-height: 2.1em;
}
.pos-tile-meta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: .25rem;
	margin-top: auto;
}
.pos-tile-price { font-weight: 700; color: #0d6efd; font-size: .95rem; }
.pos-tile-stock {
	font-size: .7rem;
	padding: 1px 6px;
	border-radius: 999px;
	background: #e6f4ea;
	color: #1e8449;
	font-weight: 600;
}
.pos-tile-stock.low { background: #fff3cd; color: #856404; }
.pos-tile-stock.out { background: #fdecea; color: #b03a2e; }

.pos-tiles-empty { grid-column: 1 / -1; padding: 1.5rem; }

.pos-search-flash {
	margin-top: .35rem;
	padding-left: .25rem;
}

/* ---- Cart panel (sections) ---- */
.pos-section {
	background: #fff;
	border: 1px solid #e9ecef;
	border-radius: .5rem;
	padding: .75rem;
	margin-bottom: .75rem;
}
.pos-section-title {
	font-size: .85rem;
	font-weight: 700;
	color: #495057;
	text-transform: uppercase;
	letter-spacing: .03em;
	margin: 0 0 .5rem 0;
	display: flex;
	align-items: center;
	gap: .35rem;
}
.pos-section-title .badge { margin-left: auto; font-weight: 600; }

@media (min-width: 992px) {
	/* Sticky cart panel on desktop so the cashier always sees totals. */
	.pos-cart {
		position: sticky;
		top: 70px;
		align-self: flex-start;
		max-height: calc(100vh - 90px);
		overflow-y: auto;
	}
}

/* ---- Cart rows ---- */
.pos-cart-list { min-height: 40px; }
.pos-cart-empty { padding: 1rem .5rem; }
.pos-cart-empty .fa-2x { opacity: .4; }

.pos-cart-row {
	display: grid;
	grid-template-columns: 44px 1fr auto auto auto;
	grid-template-areas: "img main qty total remove";
	align-items: center;
	gap: .5rem;
	padding: .5rem 0;
	border-bottom: 1px solid #f1f3f5;
}
.pos-cart-row:last-child { border-bottom: none; }
.pos-cart-row-img {
	grid-area: img;
	width: 44px; height: 44px;
	object-fit: cover;
	border-radius: .375rem;
	background: #f8f9fa;
}
.pos-cart-row-main { grid-area: main; min-width: 0; }
.pos-cart-row-name {
	font-weight: 600;
	font-size: .9rem;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.pos-cart-row-qty { grid-area: qty; }
.pos-cart-row-total {
	grid-area: total;
	font-weight: 700;
	min-width: 70px;
	text-align: right;
	font-variant-numeric: tabular-nums;
}
.pos-cart-row-remove { grid-area: remove; padding: .25rem .5rem; }

/* qty stepper — 44px tap targets */
.qty-stepper {
	display: inline-flex;
	align-items: center;
	gap: 2px;
}
.qty-stepper .btn {
	min-width: 36px;
	min-height: 36px;
	font-weight: 700;
	font-size: 1.1rem;
	padding: 0;
	line-height: 1;
}
.qty-stepper .qty-input {
	width: 50px;
	text-align: center;
	font-weight: 600;
	-moz-appearance: textfield;
	appearance: textfield;
}
.qty-stepper .qty-input::-webkit-outer-spin-button,
.qty-stepper .qty-input::-webkit-inner-spin-button { -webkit-appearance: none; appearance: none; margin: 0; }

@media (max-width: 575.98px) {
	.pos-cart-row {
		grid-template-columns: 44px 1fr auto;
		grid-template-areas:
			"img main remove"
			"img qty  total";
		row-gap: .25rem;
	}
	.qty-stepper .btn { min-width: 40px; min-height: 40px; }
	.qty-stepper .qty-input { width: 44px; }
}

/* ---- Totals grid ---- */
.pos-totals-grid {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: .35rem .75rem;
	align-items: center;
}
.pos-totals-row {
	display: contents;
}
.pos-totals-row label {
	font-size: .85rem;
	color: #495057;
	margin: 0;
}
.pos-totals-row input[type="text"] {
	max-width: 130px;
	font-variant-numeric: tabular-nums;
}
.pos-totals-row.pos-grand label { font-weight: 700; color: #212529; }
.pos-totals-row.pos-grand input {
	font-weight: 800;
	color: #198754;
	font-size: 1.05rem;
}

/* ---- Quick tender pad ---- */
.pos-tender {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: .35rem;
}
.pos-tender .btn {
	min-height: 44px;
	font-weight: 600;
}
@media (max-width: 575.98px) {
	.pos-tender { grid-template-columns: repeat(2, 1fr); }
}

/* ---- Sticky checkout footer ---- */
.pos-checkout-footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: .75rem;
	padding: .65rem .85rem;
	background: #fff;
	border-top: 1px solid #e9ecef;
	box-shadow: 0 -3px 12px rgba(0,0,0,.06);
	position: fixed;
	bottom: 0; left: 0; right: 0;
	z-index: 1030;
	padding-bottom: calc(.65rem + env(safe-area-inset-bottom, 0px));
}
@media (min-width: 992px) {
	.pos-checkout-footer {
		position: static;
		margin-top: 1rem;
		border-radius: .5rem;
		border: 1px solid #e9ecef;
		box-shadow: none;
	}
}
.pos-checkout-grand { display: flex; flex-direction: column; line-height: 1.1; }
.pos-checkout-grand-label { font-size: .7rem; text-transform: uppercase; color: #6c757d; letter-spacing: .04em; font-weight: 600; }
.pos-checkout-grand-value { font-size: 1.4rem; color: #198754; font-variant-numeric: tabular-nums; }
.pos-checkout-actions { display: flex; gap: .5rem; align-items: center; }
.pos-checkout-actions .btn-lg { min-height: 48px; min-width: 120px; font-weight: 700; }

/* ---- Validation echo (POS form has no .form-group wrappers) ---- */
.pos-form .has-error input,
.pos-form .has-error select { border-color: #dc3545; }

/* ---------- BS3 input-group-addon -> BS5 input-group-text ---------- */
.input-group-addon {
	display: flex;
	align-items: center;
	padding: .375rem .75rem;
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.5;
	color: #212529;
	text-align: center;
	white-space: nowrap;
	background-color: #e9ecef;
	border: 1px solid #ced4da;
	border-radius: .375rem;
}
.input-group > .input-group-addon:not(:first-child) { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.input-group > .input-group-addon:not(:last-child)  { border-top-right-radius: 0; border-bottom-right-radius: 0; margin-right: -1px; }
.input-group > .form-control + .input-group-addon,
.input-group > .input-group-addon + .form-control { border-top-left-radius: 0; border-bottom-left-radius: 0; }