/* ============================
   Orderroom Modern Skin (CSS-only)
   Version 1.0 — Paul and Jim
   ============================ */


/* ============================
   Fonts
   ============================ */

@font-face {
	font-family: 'GabaritoRegular';
	src: url('fonts/Gabarito-Regular.ttf');
}

@font-face {
	font-family: 'GabaritoBold';
	src: url('fonts/Gabarito-Bold.ttf');
}

@font-face {
	font-family: 'GabaritoBlack';
	src: url('fonts/Gabarito-Black.ttf');
}


/* ============================
   CSS Reset / Root Vars
   ============================ */

* {
	box-sizing: border-box;
}

:root {
	--textColour: #2F2F2F;
	--bg: #eef3f4;
	--surface: #ffffff;
	--panel: #ffffff;
	--ink: #2F2F2F;
	--muted: #9fb3c8;
	--line: #3D3D3D;
	--accent: #6ea8ff;
	--accent-strong: #4c6fff;
	--ok-bg: #0a3d2a;
	--ok-fg: #aef5cd;
	--bad-bg: #FFEEEE;
	--bad-fg: #C42727;
	--chip: #162033;
	--chip-line: #23324a;
	--button-primary-admin: #790e6e;
	--button-primary-customer: #02B1C4;
}


/* ============================
   Base / Typography
   ============================ */

html,
body {
	background: var(--bg);
	color: var(--ink);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

body {
	margin: 0;
	font-family: GabaritoRegular, 'Helvetica Neue', Arial;
	font-size: 1rem;
	overflow-x: hidden;
}

a {
	text-decoration: none;
}

h1,
h2,
h3,
h4,
ul,
p,
.item,
.order {
	margin: 16px 0;
}

p.errormessage:empty {
  margin: 0;
  padding: 0;
  height: 0;
}
p.errormessage{
    padding: 16px;
    background: var(--bg);
    border-radius: 16px;
}

h1 {
	margin: 0;
	font-size: 2.25rem;
	font-family: GabaritoBlack, 'Helvetica Neue', Arial;
}

h2 {
	font-size: 1.75rem;
}

p,
input {
	font-size: 1rem;
}

p span {
	font-family: GabaritoBlack, 'Helvetica Neue', Arial;
}

ul {
	margin: 0;
    padding:0;
    list-style:none;
}

li {
    margin:0;
}


/* ============================
   Layout: Header / Main
   ============================ */

header {
	/* position:sticky; */
	top: 0;
	margin: 0 auto;
	padding: 16px 20px;
}

header .header{
  display: flex;
  align-items: center;      /* vertical centering */
  justify-content: space-between; /* left/right alignment */
}

main {
	margin: 0 auto;
	padding: 0 16px;
}

@media (min-width:900px) {
	main {
		grid-template-columns: 1fr 1fr 1fr;
	}
}


/* ============================
   Login Banner
   ============================ */

.cfg {
	display: flex;
	justify-content: space-between;
	align-items: center;
	background: #eef3f4;
}

.login-banner.logged-in {
	padding-right: 28px;
	background: url(images/icons/user.svg) no-repeat 100% 50%;
	color: var(--button-primary-admin);
	font-weight: 600;
}

header #logo {
	margin: 0 0 16px 0;
}


/* ============================
   Panels
   ============================ */

.panel {
	background: var(--panel);
	border-radius: 16px;
	padding: 16px;
	margin-bottom: 16px;
	width: 100%;
}

/* first child spacing tidy in panels and carts */
.panel>*:first-child,
#cartcontainer>*:first-child,
#till-cartcontainer>*:first-child {
	margin-top: 0;
}

/* Network indicator (small persistent banner) */
#network-indicator{
	position: fixed;
	right: 12px;
	top: 12px;
	z-index: 99999;
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 6px 10px;
	border-radius: 14px;
	font-size: 13px;
	box-shadow: 0 2px 6px rgba(0,0,0,0.12);
	background: rgba(0,0,0,0.06);
	color: var(--ink);
}
#network-indicator.network-online{ background: rgba(46, 204, 113, 0.12); color: #0b8a39; }
#network-indicator.network-offline{ background: rgba(231, 76, 60, 0.08); color: #c1271b; }
#network-indicator .ni-dot{ font-weight: 700; margin-right: 4px; }
#network-indicator .ni-text{ font-size: 12px; opacity: 0.95; }

/* Opening screen full-viewport hero */
.opening-screen{
	position: fixed;
	inset: 0;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 99990;
	background-image: url('images/cafeimage.png');
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
}
.opening-screen{
	position: fixed;
	inset: 0;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 99990;
	background-color: #eceff0; /* fallback when image aspect leaves gaps */
}

/* opening background image element: show entire photo without stretching */
.opening-bg{
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: auto;
	height: 100%;
	max-width: none;
	object-fit: contain; /* ensures image is not stretched and full image visible */
	pointer-events: none;
	user-select: none;
	z-index: 1;
}
.opening-screen .overlay{ position:absolute; inset:0; background: linear-gradient(rgba(0,0,0,0.06), rgba(0,0,0,0.18)); z-index:2; }
.opening-screen .overlay{ position:absolute; inset:0; background: linear-gradient(rgba(255,255,255,0.02), rgba(0,0,0,0.22)); }
.opening-screen .center-column{
	position: relative;
	z-index: 2;
	width: 100%;
	max-width: 640px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-between;
	height: 300px; /* slightly reduced to move content up more */
	padding: 16px;
	transform: translateY(-36px);
}
.opening-screen .center-column{
	position: relative;
	z-index: 3;
	width: 100%;
	max-width: 640px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-between;
	height: 300px; /* equal spacing for three items */
	padding: 16px;
	transform: translateY(-36px);
}
.opening-logo{ max-width: 320px; height: auto; margin-bottom: 8px; filter: drop-shadow(0 6px 18px rgba(0,0,0,0.12)); }
.opening-btn{ width: 280px; height: 56px; border-radius: 12px; border: none; font-family: GabaritoBlack, GabaritoBold, GabaritoRegular, Arial, sans-serif; font-weight: 700; font-size: 18px; letter-spacing: 0.6px; text-transform: uppercase; cursor: pointer; }
.opening-btn.primary{ background: #0b5962; color: #fff; }
.opening-btn.secondary{ background: rgba(255,255,255,0.92); color: var(--button-primary-admin); box-shadow: 0 6px 18px rgba(11,89,98,0.08); }
.opening-screen .hint{ margin-top: 8px; font-size: 13px; color: rgba(0,0,0,0.6); }

.panel>*:last-child,
#cartcontainer>*:last-child,
#till-cartcontainer>*:last-child {
	margin-bottom: 0;
}

#cartcontainer h2 {
	margin-top: 0;
}


/* ============================
   Forms / Inputs
   ============================ */

label {
	font-size: 1rem;
	margin: 0 0 16px 0;
	display: block;
}

label.checkbox {
	display: block;
}

label.checkbox,
label.checkbox span {
	width: auto;
}

label span {
	display: block;
	margin: 0 0 8px 0;
}

input,
select,
textarea {
	background: var(--surface);
	color: var(--ink);
	border: 1px solid var(--line);
	border-radius: 12px;
	padding: 12px 16px;
	min-width: 200px;
	display: inline-block;
	font-size: 1rem;
	width: 100%;
}

input[type="date"] {
	font-family: GabaritoRegular, 'Helvetica Neue', Arial;

}

input[type="checkbox"] {
	visibility: hidden;
	height: 0;
	padding: 0;
	display: none;
}

/* custom checkbox visual */
label.checkbox span.dummycheckbox {
	min-width: auto;
	height: 44px;
	width: 44px;
	border: 1px solid var(--line);
	border-radius: 12px;
	margin-bottom: 0;
}

tr.inactive{
    background: var(--bg);
    
}

/* focus noop holders */
input:focus,
select:focus,
textarea:focus {
	--_focus_noop: 0;
}

/* custom select arrow */
select {
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	color: #333;
	background: url(images/icons/chevrondown.svg) no-repeat right 16px center;
}


/* ============================
   Buttons / Badges / Status
   ============================ */

button {
	background: var(--button-primary-admin);
	color: #fff;
	border: 0;
	border-radius: 16px;
	padding: 12px 16px;
	font-size: 1rem;
    width:100%;
}
button.secondary{
    background:none;
	color: var(--button-primary-admin);
    border: 2px solid var(--button-primary-admin);
}

button:hover {
	cursor: pointer;
	filter: brightness(1.06);
}

button:active {
	transform: translateY(1px);
}

button:disabled {
	opacity: 1;
	cursor: not-allowed;
}

button.button-inline, #businesses-search-btn{
    width: auto
}


/* Ensure admin-related UI uses the business colour by default.
   Target admin action buttons, active pills/filters, panels and other
   conventional admin controls. This avoids touching customer-ordering
   buttons which are styled via .ordering button and should keep their
   separate colour. */
.pill-btn.active,
.filter-btn.active,
.login-banner.logged-in,
.admin-action-btn,
button.add-btn,
button#admin-add-btn,
.ues-save,
.admin-list table tr td button,
.panel > button {

}

button.large {
	width: 100%;
}

.ordering button {
	background: var(--button-primary-customer);
}

.badge,
.pill,
.status {
	display: inline-flex;
	align-items: center;
	height: 20px;
	background: var(--chip);
	color: #cde2ff;
	border: 1px solid var(--chip-line);
	border-radius: 999px;
	padding: 0 10px;
	font-size: .8rem;
}

/* Small inline status badges used on Station order headers */
.status-badge {
	display: inline-block;
	padding: 4px 8px;
	border-radius: 999px;
	font-size: 0.8rem;
	margin-right: 8px;
	color: white;
}
.status-badge.delivery {
	background: #6ea8ff; /* existing accent-ish color for delivery */
	color: #07345a;
	border: 1px solid rgba(0,0,0,0.06);
}
.status-badge.pickup {
	background: #2DAF7F; /* green */
	color: #042f1f;
	border: 1px solid rgba(0,0,0,0.06);
}
.status-badge.pickup-name {
	background: #eaf8f0;
	color: #0a3d2a;
	border: 1px solid rgba(10, 61, 42, 0.08);
	padding: 4px 10px;
	margin-left: 6px;
}
.status-badge.eta {
	background: #f5f5f5;
	color: var(--ink);
	border: 1px solid rgba(0,0,0,0.06);
}

/* Optionally highlight the whole order row for pickup/delivery in Stations view */
.order.delivery { border-left: 6px solid #6ea8ff; padding-left: 10px; }
.order.pickup { border-left: 6px solid #2DAF7F; padding-left: 10px; }

.ok {
	background: var(--ok-bg) !important;
	color: var(--ok-fg) !important;
	border-color: rgba(10, 61, 42, .6) !important;
}

.err {
	background: var(--bad-bg) !important;
	color: var(--bad-fg) !important;
	border-color: rgba(58, 21, 21, .6) !important;
	padding: 16px;
	border-radius: 8px;
}
/* Hide empty error blocks so we don't display an empty red bar when
	 a status element has the .err class but no message text. */
.err:empty {
	display: none;
	padding: 0;
	height: 0;
	margin: 0;
}

/* visual "disabled" for primary buttons */
.button-primary.disabled,
.disabled.button-primary {
	opacity: .6;
	filter: grayscale(.25);
	cursor: default;
}

/* ============================
   Move inline JS styles into classes
   ============================ */

/* small pill-style badge used for ETA/delivered markers */
.pill-badge,
.status-badge.eta-range.header-range {
	display: inline-block;
	white-space: nowrap;
	font-weight: 600;
	background: #e6f7ff;
	color: #055;
	padding: 3px 8px;
	border-radius: 999px;
	margin-left: 8px;
	font-size: 12px;
	vertical-align: middle;
	z-index: 9999;
}

/* highlighted overlay/pill shown to the right of order headers */
.order-override-pill,
.eta-overlay.order-override-pill {
	position: absolute;
	right: 12px;
	top: 12px;
	max-width: 46%;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	background: linear-gradient(90deg,#fff7c2,#fff1a8);
	color: #222;
	padding: 6px 12px;
	border: 2px solid #ffd24d;
	border-radius: 12px;
	z-index: 2147483647;
	box-shadow: 0 6px 18px rgba(0,0,0,0.12);
	font-weight: 700;
	font-family: sans-serif;
	font-size: 12px;
	pointer-events: none;
}

/* deliveries header layout */
.deliveries-header { display:flex; justify-content:space-between; align-items:center; }
.eta-inline { display:flex; align-items:center; gap:8px; }

/* small display utilities used by JS to toggle element layout without inline styles */
.d-inline-flex { display: inline-flex !important; }
.d-inline-block { display: inline-block !important; }
.d-inline { display: inline-block !important; }

.button-primary.disabled:focus,
.disabled.button-primary:focus {
	outline: 3px solid rgba(0, 0, 0, .06);
	outline-offset: 2px;
}


/* ============================
   Menu Items / Orders
   ============================ */

.menu {
	display: grid;
	gap: 8px;
	margin-top: 8px;
}

.item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	background: #fff;
	border-radius: 16px;
	padding: 16px;
	gap: 16px;
}

.item .item-name,
.admin-item {
	flex: 1;
}

.order {
	background: #fff;
	border-radius: 16px;
	padding: 16px;
}

.order .products {
	display: flex;
	align-items: center;
}

.order .products p {
	flex: 1;
}

.order .ordernodate {
	display: flex;
	justify-content: space-between;
	gap: 16px;
}

.ordernodate p {
	margin-bottom: 0;
}

/* Add a small gap under the ETA header-range on the Deliveries screen so
   the pill doesn't sit too close to the order body. This targets only
   the deliveries view to avoid altering Stations spacing. */
#screen-deliveries .ordernodate p {
	margin-bottom: 8px;
}
#screen-deliveries .status-badge.eta-range {
	margin-bottom: 8px;
}

.ordertable:not(:first-of-type) p {
	display: none;
}

.order .ordertable:first-of-type h3,
.order .ordertable:first-of-type p {
	margin: 0;
}

.order .ordertable h3,
.order .ordertable p {
	margin-bottom: 0;
}

.order .ordertable {
	display: flex;
	justify-content: space-between;
	gap: 16px;
}


/* ============================
   Filters / Navigation (Pills)
   ============================ */

.menu-filters {
	background: var(--bg);
	z-index: 1;
	padding: 16px 0;
}

/* horizontal scroll containers */
#navigation ul,
.menu-filters ul {
	margin: 0;
	padding: 16px 0;
	list-style: none;
	display: flex;
	flex-wrap: nowrap;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.screen-pills {
	padding: 0 16px;
	margin: 0 auto;
}

.screen-pills .pill-btn,
.menu-filters .filter-btn,
#screen-ordering .filter-btn {
	background: none;
	color: #2F2F2F;
	border-radius: 16px;
	display: inline-flex;
	align-items: flex-start;
	padding: 12px 16px;
	cursor: pointer;
	font-weight: 100;
}

.pill-btn.active,
.filter-btn.active {
	background: var(--button-primary-admin);
	color: #fff;
}

#screen-ordering .filter-btn.active {
	background: var(--button-primary-customer);
	color: #fff;
}

/* FIXED: no nested blocks; list variant styling */
.menu-filters {
	display: flex;
	position: sticky;
	top: 0;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	flex-wrap: nowrap;
	gap: 8px;
	align-items: baseline;
}

.menu-filters ul {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	gap: 8px;
}

.menu-filters li {
	display: inline-block;
}

.menu-filters a.filter-btn {
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	padding: 12px 16px;
	border-radius: 16px;
}

/* Ensure active filter buttons inside menu-filters show the admin colour. */
.menu-filters .filter-btn.active,
#screen-admin .menu-filters .filter-btn.active {
    background: var(--button-primary-admin);
    color: #fff;
}

.menu-filters * {
	flex-shrink: 0;
}


/* ============================
   Cart / Cart Rows
   ============================ */

.cart {
	list-style: none;
	margin: 8px 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.cart li {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	max-width: 364px;
	box-sizing: border-box;
	margin-bottom: 8px;
}

.cart li * {
	align-self: center;
	margin-top: 0;
	margin-bottom: 0;
}

.cart .cart-name {
	width: 170px;
}

.cart li .adjustnumber {
	border: 1px solid var(--ink);
	padding: 2px;
	border-radius: 26px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 70px;
}

.cart li button,
.maximised-cart button {
	height: 24px;
	width: 24px;
	background: none;
	padding: 0;
	background: url(images/icons/add.svg) no-repeat 50% 50%;
	display: inline-block;
}

.maximised-cart button {
	background-image: url(images/icons/cross.svg);
	display: none;
}

.cart li .adjustnumber button:first-of-type {
	background-image: url(images/icons/remove.svg);
}

.cart li button:nth-of-type(1) {
	background-image: url(images/icons/bin.svg);
	margin-top: 3px;
}

.total {
	font-weight: 800;
	font-size: 1.2rem;
}


/* ============================
   Utilities / Helpers
   ============================ */

.row {
	display: flex;
	gap: 16px;
	flex-wrap: wrap;
}

.row> :nth-last-child(2) {
	flex: 1;
	margin-right: auto;
}

.center {
	display: flex;
	align-items: center;
	justify-content: center;
}

.right {
	display: flex;
	justify-content: flex-end;
}

hr {
	border: 0;
	height: 1px;
	background: linear-gradient(90deg, transparent, var(--line), transparent);
}

.grid {
	display: grid;
	gap: 12px;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}


/* ============================
   Product Thumbs
   ============================ */

.item .productimage {
	display: none;
}

.imagethumbs .item .productimage {
	display: block;
	text-align: center;
	background: #C5DFE6;
	width: 100%;
	align-items: center;
	border-radius: 16px;
}

.imagethumbs .item .productimage img {
	width: 100%;
	height: 100%;
	/* Fill the container while preserving aspect ratio and avoid stretching */
	object-fit: cover;
	object-position: center center;
	display: block;
	/* Let the container's border-radius and overflow:hidden handle clipping */
	border-radius: 0;
}

/* No-image overlay: when a productimage has no image, show a styled label.
	 Use CSS variables so it's easy to tweak the look. */
.productimage {
	position: relative;
	overflow: hidden; /* ensure overlay sits above */
}
.productimage.no-image::after {
	content: var(--no-image-text, "No image");
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	background: var(--no-image-bg, rgba(255,255,255,0.7));
	color: var(--no-image-color, var(--muted));
	padding: 8px 14px;
	border-radius: 12px;
	font-weight: 600;
	box-shadow: 0 2px 8px rgba(0,0,0,0.06);
	pointer-events: none;
	mix-blend-mode: normal;
}

/* Allow JS to supply a runtime min-height value via --min-h so we avoid
   setting inline minHeight while keeping the computed per-element value. */
.productimage { min-height: var(--min-h, auto); }

.imagethumbs .item button,
.thumbs .item button {
	width: 100%;
}


/* ============================
   Price + Favourite (row)
   ============================ */

.pricefavourite {
	display: flex;
	align-items: center;
	gap: 16px;
	flex-wrap: nowrap;
	width: 100%;
}

.pricefavourite p:first-child {
	flex: 1 1 auto;
	min-width: 0;
}

.pricefavourite p:last-child {
	margin: 0;
	white-space: nowrap;
	flex: 0 0 auto;
}

.fav-btn {
	display: inline-block;
	width: auto;
	height: auto;
	padding: 0;
	margin: 0;
	border: none;
	background: transparent;
	color: var(--ink);
	text-decoration: none;
	font-size: 18px;
	line-height: 1;
	vertical-align: middle;
}

.fav-btn:hover,
.fav-btn:focus {
	color: #6f1b63;
	text-decoration: none;
}

/* Directory business capability icons (tick / cross) */
.biz-capabilities {
	list-style: none;
	padding: 0;
	margin: 8px 0 0 0;
	display: flex;
	gap: 12px;
}
.biz-capabilities .cap-item {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--muted);.biz-hours
}
.biz-capabilities .cap-item img.cap-icon {
	width: 16px;
	height: 16px;
	display: inline-block;
}
.biz-capabilities .cap-item img.cap-icon.tick {
	/* stronger green tint for tick icons */
	width: 18px;
	height: 18px;
	filter: invert(43%) sepia(81%) saturate(413%) hue-rotate(73deg) brightness(98%) contrast(92%);
}
.order-mode-switch {
	display: inline-flex;
	gap: 6px;
	margin-left: auto;
	align-self: flex-start;
	z-index: 5;
}
.order-mode-switch .mode-btn{
	background: rgba(0,0,0,0.04);
	color: var(--ink);
	border-radius: 12px;
	padding: 6px 10px;
	font-size: 0.9rem;
	/* Ensure the mode buttons don't inherit the global `button { width:100% }` */
	width: auto !important;
	display: inline-flex !important;
	min-width: 44px;
	justify-content: center;
}
.order-mode-switch .mode-btn.active{
	background: var(--button-primary-customer);
	color: #fff;
}

/* When Table ordering is active give a small gap below the buttons so
   the following form rows don't sit tightly under the switch. */
.order-mode-switch .mode-btn[data-mode="table"].active{
	margin-bottom: 12px;
}

/* When hidden we simply apply the app's hidden utility */
.hidden { display: none !important; }
.biz-capabilities .cap-item img.cap-icon.cross {
	/* stronger red tint for cross icons */
	width: 18px;
	height: 18px;
	filter: invert(16%) sepia(86%) saturate(6138%) hue-rotate(-4deg) brightness(100%) contrast(103%);
}


/* ============================
   Screens (Tabs/Sections)
   ============================ */

.screen {
	display: none;
}

.screen.on {
	display: block;
}



.sc-responsive-table table {
	background: green
}

.sc-responsive-table thead {
	background-color: #333;
	color: #fff;
}

.sc-responsive-table tbody tr:nth-child(even) {
	background-color: rgba(0, 0, 0, .03);
}

.sc-responsive-table th,
.sc-responsive-table td {
	padding: 10px 15px;
	border-bottom: 1px solid rgba(0, 0, 0, .06);
}


.admin-add,
.station-refresh,
.filtercontainer {
	display: flex;
	gap: 8px;
	align-items: flex-end;
	flex-wrap: wrap;
}

/* Right-aligned group for Directory inputs (keeps labels left-aligned above inputs) */
.businesses-add .businesses-right{
	margin-left: auto;
	display: flex;
	gap: 12px;
	align-items: flex-end;
}
.businesses-add .businesses-right label{
	display: flex;
	flex-direction: column;
	align-items: flex-start; /* keep the header text left-aligned above the input */
	margin-bottom: 0;
}
.businesses-add .businesses-right input{
	min-width: 180px;
}


.filtercontainer .filter-button {
    width:auto;  
}

.filtercontainer .filter-button:first-of-type {
  margin-left: auto;
}

#admin-input {
	flex: 1;
	min-width: 140px;
}

.admin-items {
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin: 8px 0;
}

.admin-stats {
	display: flex;
	justify-content: space-between;
	align-items: center;
    flex-wrap: wrap;
}

.admin-stats p {
	flex: 1;

}

.admin-stats span {
	display: block;
	font-size: 1.75rem;
}

.admin-item {
	--_admin_item_noop: 0;
}

.admin-item.admin-item-table {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.admin-item.admin-item-table .meta {
	margin-top: 0;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
}

.admin-item.admin-item-table .toggle-table {
	margin-left: 12px;
}

.admin-form {
	--_admin_form_noop: 0;
}

.toggle-table[disabled],
.toggle-station[disabled],
.toggle-group[disabled] {
	opacity: .6;
	cursor: not-allowed;
}

#admin-results label,
.filtercontainer label {
	margin-bottom: 0;
}

/* Checkbox copy tweaks */
label.checkbox {
	display: block;
}

label.checkbox>span:first-of-type {
	display: block;
	margin: 0 0 8px 0;
	position: relative;
	top: -2px;
}

/* More specific dummy checkbox styling */
label.checkbox span.dummycheckbox {
	width: 36px;
	height: 36px;
	border: 1px solid var(--line);
	border-radius: 10px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	box-sizing: border-box;
	font-size: 14px;
	line-height: 1;
}

/* tick when checked */
label.checkbox input[type="checkbox"]:checked~.dummycheckbox {
	border-color: var(--ink);
	background: url(images/icons/tick.svg) no-repeat 50% 50%;
}


/* ============================
   Screen: Login
   ============================ */

.login-screen{ 
	max-width: 340px;
	margin: 0 auto;
}

.login-screen label {
	width: 100%;
}

.login-screen input {
	display: block;
	width: 100%;
}


/* ============================
   Cart Containers (shared)
   ============================ */

#cartcontainer,
#till-cartcontainer,
.user-edit-sheet {
	background: var(--surface);
	border-radius: 16px;
	padding: 16px;
}
.sheet{
    display:none
}


#cartcontainer .cart-header,
#till-cartcontainer .cart-header {
	display: flex;
	align-items: center;
	gap: 8px;
	justify-content: space-between;
}

/* close buttons (no background by default) */
#till-cartcontainer .cart-header .cart-close,
#cartcontainer .cart-header .cart-close,
.ues-close {
	border: 0;
	padding: 0;
	background: none;
}

/* rows inside carts */
#cartcontainer .row,
#till-cartcontainer .row {
	justify-content: space-between;
	align-items: center;
	gap: 16px;
}

/* hide close by default (mobile toggles reveal) */
#cartcontainer .cart-header .cart-close,
#till-cartcontainer .cart-header .cart-close {
	background: none;
	display: none;
}

/* collapsible mini headers hidden by default */
#cartcontainer .minimised-cart,
#till-cartcontainer .minimised-cart {
	display: none;
}


/* ============================
   Responsive: Mobile (≤600px)
   ============================ */


@media (min-width:900px) {
	.screen.on {
		grid-column: 1 / -1;
	}
}


/* ============================
   Admin Lists / Controls
   ============================ */

.admin-item .name,
.admin-card .title {
	font-family: inherit;
	font-weight: 700;
	font-size: 1.05rem;
	line-height: 1.2;
}

.admin-list {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 8px 0;
}

.admin-chip {
	border: 1px solid #374151;
	border-radius: 999px;
	padding: 6px 10px;
}

.admin-list table {
	width: 100%;
	border-collapse: collapse;
	margin: 0;
	text-align: left;

}

.admin-list table th,
.admin-list table td {
	text-align: left;
	padding: 8px 0;
	border-bottom: 1px solid var(--bg);
	width: 200px;
}

.admin-list table th.col-actions, .admin-list table td.col-actions{
    white-space:nowrap;
    width:1%;
}


.admin-list table tr:last-child td {
	border-bottom: none;
}

.admin-list table tr td button, button.refund-station{
	background-color: transparent;
	border: 1px solid var(--ink);
	vertical-align: middle;
	/* centers it within the cell */
	margin-left: 8px;
	align-self: center;
	/* prevents vertical stretch in flex parent */
	height: 43px;
	/* keeps natural height */
	line-height: normal;
	/* removes browser-imposed height inflation */
}

.admin-list table tr td button img {
	margin: 0;
	padding: 0;
}

td:last-child button:first-child {
	margin-left: 0;
}

@media (max-width:600px) {

	.admin-list table th,
	.admin-list table td {
		display: flex;
		align-items: center;
		justify-content: space-between;
		text-align: right;
		padding-left: 0;
		padding-right: 0;
		width: 100%
	}

	.admin-list table th {
		display: none
	}

	#screen-admin .panel:has(table){
		background: none;
		padding: 0;
	}

	.admin-list table tbody tr {
		background: var(--panel);
		padding: 16px;
		border-radius: 16px;
		display: block;
		margin-bottom: 16px;
	}

	/*.admin-list .panel {
		background: none;
		padding: 0;
	}*/

	td::before {
		content: attr(data-label);
		display: block;
		color: var(--ink);
		font-size: 1rem;
	}
    
    .admin-stats p{
        flex: 1 1 calc(50% - 16px);   /* ✅ 2 columns per row (subtract the gap) */
	    box-sizing: border-box;
    }


}



@media (max-width:600px) {
	label {
		width: 100%;
		margin-right: 0;
		margin-bottom: 12px;
	}

	input,
	select,
	textarea {
		min-width: auto;
		width: 100%;
	}

	/* dock carts to bottom on mobile */
	#cartcontainer,
	#till-cartcontainer {
		position: fixed;
		bottom: 0;
		left: 16px;
		right: 16px;
		border-radius: 16px 16px 0 0 !important;
		box-shadow: 0 0 16px rgba(107, 218, 114, .25);
        z-index:100;
	}

	/* collapsed by default */
	#cartcontainer section,
	#till-cartcontainer section {
		display: none;
	}

	#cartcontainer.cart-open section,
	#till-cartcontainer.cart-open section {
		display: block;
	}

	#cartcontainer h2,
	#till-cartcontainer h2 {
		display: none;
	}

	#cartcontainer.cart-open h2,
	#till-cartcontainer.cart-open h2 {
		display: block;
	}

	#cartcontainer .minimised-cart,
	#till-cartcontainer .minimised-cart {
		display: flex;
		gap: 16px;
		align-items: center;
		width: 100%;
	}

	#cartcontainer p,
	#till-cartcontainer p {
		margin: 0;
	}

	#cartcontainer .minimised-cart> :last-child,
	#till-cartcontainer .minimised-cart> :last-child {
		margin-left: auto;
	}

	#cartcontainer .maximised-cart,
	#till-cartcontainer .maximised-cart {
		display: none;
	}

	.maximised-cart button {
		display: inline-block;
		position: relative;
	}

	/* Show a small no-entry overlay on disabled action buttons */
	.admin-action-btn { position: relative; }
	.admin-action-btn .disabled-overlay {
		display: none;
		position: absolute;
		top: -6px;
		right: -6px;
		background: #fff;
		color: #c42727;
		border-radius: 999px;
		padding: 2px 4px;
		font-size: 12px;
		line-height: 1;
		box-shadow: 0 1px 2px rgba(0,0,0,0.06);
	}
	.admin-action-btn[disabled]:hover .disabled-overlay { display: block; }
	.admin-action-btn[disabled] { cursor: not-allowed; }

	#cartcontainer.cart-open .minimised-cart,
	#till-cartcontainer.cart-open .minimised-cart {
		display: none;
	}

	#cartcontainer.cart-open .maximised-cart,
	#till-cartcontainer.cart-open .maximised-cart {
		display: flex;
		gap: 16px;
		justify-content: space-between;
		align-items: baseline;
		width: 100%;
	}

	#cartcontainer.cart-open .cart-header .cart-close,
	#till-cartcontainer.cart-open .cart-header .cart-close {
		display: flex;
		padding: 0;
	}
    .imagethumbs .menu-list,.thumbs .menu-list{padding-bottom: calc(1rem + 56px);}
    
    #businesses-list .item{
        width:100%;
    }
}

/* ============================
	 Bookings widget + availability grid
	 ============================ */

.booking-time-widget {
	display: inline-flex;
	gap: 8px;
	align-items: center;
}

/* Ensure time widget sits above neighbouring buttons and is interactive */
.booking-time-widget,
.booking-time-widget select {
	position: relative;
	z-index: 3;
	pointer-events: auto;
}

/* Ensure filter buttons don't overlay inputs */
.filtercontainer .filter-button,
.filtercontainer button {
	position: relative;
	z-index: 1;
}

.booking-time-widget select.booking-time-hour,
.booking-time-widget select.booking-time-minute {
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: 12px;
	padding: 10px 12px;
	font-size: 1rem;
	color: var(--ink);
	min-width: 72px;
}

.availability-grid {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	margin-top: 8px;
}

/* ensure availability grid doesn't overlap the filter controls above */
.panel.filtercontainer + .panel .availability-grid,
#bookings-results .availability-grid {
  clear: both;
  margin-top: 12px;
}

.slot-btn {
	background: #fff;
	color: var(--ink);
	border: 1px solid var(--line);
	border-radius: 12px;
	padding: 8px 12px;
	font-size: 0.95rem;
	min-width: 72px;
	cursor: pointer;
}

.slot-btn:hover:not(:disabled) {
	filter: brightness(0.98);
}

.slot-btn.selected {
	background: var(--button-primary-admin);
	color: #fff;
	border-color: rgba(0,0,0,0.06);
}

.slot-btn:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

/* selected booking + book action */
.booking-selection {
	display: flex;
	gap: 10px;
	align-items: center;
	margin-top: 8px;
}
.booking-selection-time {
	font-weight: 600;
	padding: 8px 12px;
	border-radius: 10px;
	background: var(--surface);
	border: 1px solid var(--line);
}
.book-btn {
	background: var(--button-primary-admin);
	color: #fff;
	border: none;
	padding: 8px 12px;
	border-radius: 12px;
	cursor: pointer;
}
.book-btn:disabled { opacity: 0.6; cursor: not-allowed; }



/* ============================
   Product Lists (one per row on small)
   ============================ */

.imagethumbs .item,
.thumbs .item {
	flex: 0 0 100%;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 16px;
}

.imagethumbs .item p,
.thumbs .item p {
	margin: 0;
}


/* ============================
   Desktop Layout (≥600px): Two Columns + Sticky Carts
   ============================ */

@media (min-width:600px) {

	/* two-column layouts */
	#layout,
	#till-layout {
		display: flex;
		gap: 16px;
		align-items: flex-start;
		/* prevent vertical stretch */
	}

	/* left columns (menus) can grow/shrink; allow shrinking */
	#menu,
	#till-menu {
		flex: 1 1 auto;
		min-width: 0;
		align-content: baseline;
	}

	/* right columns (carts): fixed width + sticky */
	#cartcontainer,
	#till-cartcontainer {
		position: sticky;
		top: 90px;
		align-self: flex-start;
		flex: 0 0 400px;
		height: fit-content;
	}

	.imagethumbs .menu-list,
	.thumbs .menu-list, #businesses-list {
		display: flex;
		gap: 16px;
		flex-wrap: wrap;
	}
    
    

	.imagethumbs .item,
	.thumbs .item{
		flex: 0 0 calc((100% - (2 * 16px)) / 3);
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: 16px;
	}
    
    #businesses-list .item{
		flex: 0 0 calc((100% - (2 * 16px)) / 3);
		box-sizing: border-box;
		flex-direction: column;
		align-items: flex-start;
		gap: 16px;

	}
    #businesses-list .item .restaurant-title{
      display: flex;
      align-items: center;        /* vertically centers items */
      justify-content: space-between; /* pushes left & right apart */
    }
    #businesses-list .item h3,#businesses-list .item p{

    }
    
    #businesses-list .item .business-image {
        margin-bottom:16px;
        display: flex;
        align-items: center;
    }
    #businesses-list .item .business-image .left{
        display: flex;
        align-items: center;
        gap: 10px;
    }
    
    #businesses-list .restaurant-phone{
        margin-left: auto;
    }
    #businesses-list .item p.button{
        margin-top: auto; 
        width:100%;
    }
    #businesses-list .item p.button button{
        display:block;
    }
    

	.imagethumbs .item p,
	.thumbs .item p {
		margin: 0;
	}
}

   #businesses-list .item li img{
      vertical-align: middle;
    }
    #businesses-list .item ul{
		display: flex;
		gap: 16px;
		flex-wrap: wrap;
        align-items: center;      /* vertical centering */
        margin-bottom:16px;
    }
   #businesses-list .item li{
      flex: 0 0 calc((100% - 16px) / 2); /* 2 per row, 1 gap per row */
      box-sizing: border-box;
    }   
    
/* Business hours list shown on directory cards */
.biz-hours{ 
    margin-top:8px;
}
		/* Use CSS multi-column layout so items fill top->bottom then flow to next column */
		.biz-hours-list{ list-style:none; padding:0; margin:6px 0 0 0; column-count:2; column-gap:16px; display:block !important; }
		.biz-hours-day{ display:block; break-inside:avoid; -webkit-column-break-inside:avoid; box-sizing:border-box; margin-bottom:6px; }
		/* Single column on small screens */
		@media (max-width:900px){ .biz-hours-list{ column-count:1; } }


/* ============================
   Admin Grid (≥900px)
   ============================ */

@media (min-width:900px) {
	.admin-grid {
		grid-template-columns: repeat(4, 1fr);
	}
}

/* ============================
   User Edit Sheet (slide-up) - styles used by script.js classes
   ============================ */
.table-edit-sheet,
.user-edit-sheet {
	display: none;
}

.sheet.ues-open {
	display: block;
	position: fixed;
	left: 0;
	right: 0;
	bottom: -100%;
	background: #fff;
	box-shadow: 0 0 16px rgba(107, 218, 114, .25);
	padding: 16px;
	border-top-left-radius: 12px;
	border-top-right-radius: 12px;
	transition: bottom 240ms ease;
	z-index: 9999;
}

.sheet.ues-open {
	bottom: 0;
	left: 16px;
	right: 16px;
}

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

.ues-close {}

.ues-row {}

.ues-row span {}

.ues-actions {
	display: flex;
	align-items: center;
	/* keeps them vertically aligned, not stretched */
}

.ues-save {
	margin-left: auto;
}

.ues-cancel {
	background: transparent;
	border: 1px solid var(--ink);
	color: var(--ink)
}

/* Variation picker style: match shopping bag look */
.variation-sheet {
	/* inherit general sheet look; compact like the shopping bag */
	padding: 12px;
	width: 320px;
	box-sizing: border-box;
}
.variation-sheet .ues-header { text-align: left; margin-bottom: 12px; }
.variation-sheet .ues-header h3 { margin: 0; font-size: 1.05rem; }
.variation-sheet .ues-body { display: flex; flex-direction: column; gap: 8px; padding: 6px 0; }
.variation-sheet .var-row { width: 100%; }
.variation-sheet .var-choose {
	display: block;
	width: 100%;
	text-align: center;
	background: var(--button-primary-customer);
	color: #fff;
	border: 0;
	padding: 10px 12px;
	border-radius: 12px;
	font-weight: 600;
	box-shadow: 0 2px 6px rgba(0,0,0,0.06);
	cursor: pointer;
}
.variation-sheet .var-choose:hover { opacity: 0.98; transform: translateY(-1px); }
.variation-sheet .var-choose[aria-selected="true"], .variation-sheet .var-choose.selected { background: #fff; color: var(--button-primary-customer); border: 2px solid var(--button-primary-customer); }

/* Till-specific variant: use admin primary colour when opened from the Till screen */
.variation-sheet.variation-sheet--till .var-choose {
    background: var(--button-primary-admin);
}
.variation-sheet.variation-sheet--till .var-choose[aria-selected="true"],
.variation-sheet.variation-sheet--till .var-choose.selected {
    background: #fff;
    color: var(--button-primary-admin);
    border: 2px solid var(--button-primary-admin);
}
.variation-sheet .ues-actions { padding-top: 8px; }
.variation-sheet #var-cancel {
	display: block;
	width: 100%;
	padding: 10px 12px;
	border-radius: 12px;
	background: #fff;
	border: 1px solid rgba(0,0,0,0.12);
	color: #000;
	margin-top: 6px;
}

/* Position variation sheet like the shopping bag: right-side panel on desktop */
#variation-select-sheet.sheet.ues-open {
	left: auto !important;
	right: 24px !important;
	top: 120px !important;
	bottom: auto !important;
	transform: none !important;
	width: 320px !important;
}

/* Till controls compact form (moved from inline styles in index.html) */


/* Small variant for inputs used inside sheet rows */
.ues-input-small {
	width: 120px;
}

/* Right-align price cells in tables */
.cell-price-right {
	text-align: right;
}

/* spacer helper used in admin action cells */
.spacer {
	margin-left: 8px;
	display: inline-block;
}



.admin-action-btn, .refund-station{
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 44px !important;
	height: 44px !important;
	border: 1px solid var(--ink);
	background: #fff !important;
}

.admin-action-btn img {
	width: 20px;
	height: 20px;
	display: block;
}

/* Slots (Gantt) view styles */
.slots-gantt {
	position: relative;
	min-height: 160px;
	background: linear-gradient(180deg, rgba(255,255,255,0.6), rgba(250,250,250,0.6));
	border: 1px solid var(--line);
	border-radius: 12px;
	padding: 12px;
	overflow: auto;
}
.gantt-axis {
	position: relative;
	height: 28px;
	margin-bottom: 8px;
}
.gantt-timeline{
	position: absolute;
	left: 140px; /* must match label width */
	right: 0;
	top: 0;
	height: 28px;
}
.gantt-axis-tick {
	position: absolute;
	top: 0;
	transform: translateX(-50%);
	font-size: 0.85rem;
	color: var(--muted);
}
.gantt-rows {
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.gantt-row {
	display: flex;
	gap: 8px;
	align-items: center;
}
.gantt-row-label {
	min-width: 110px;
	font-weight: 600;
	color: var(--ink);
}
.gantt-row-label {
	/* Ensure the label text vertically centers to match the lane height */
	display: flex;
	align-items: center;
	height: 44px; /* matches .gantt-row-lane min-height */
}
.gantt-row-label {
	/* also set line-height so text baseline aligns perfectly */
	line-height: 44px;
}
.gantt-row-lane {
	/* ensure the lane centers its content; preserves absolute positioning of bars */
	display: flex;
	align-items: center;
}

/* debug helpers removed */
.gantt-row-lane {
	flex: 1;
	min-height: 44px;
	background: transparent;
	position: relative;
}
.gantt-bar {
	background: var(--button-primary-admin);
	color: #fff;
	border-radius: 8px;
	box-shadow: 0 1px 0 rgba(0,0,0,0.06);
	cursor: pointer;
	display: flex;
	align-items: center;
	font-size: 0.85rem;
}

/* Party-size badge (right side of booking bar) */
.gantt-bar .gantt-bar-party {
	background: #fff; /* white background */
	color: var(--button-primary-admin); /* coloured number */
	border: 2px solid var(--button-primary-admin);
	padding: 2px 6px;
	border-radius: 12px;
	font-size: 0.85em;
	margin-left: 8px;
	flex: 0 0 auto;
	line-height: 1;
}
.gantt-bar.status-rejected { background: var(--bad-bg); color: var(--bad-fg); border: 1px solid rgba(200,50,50,0.08); }

/* Arrived bookings: use the secondary button colour (outlined purple with white fill)
   so arrived bars are visually distinct but not as prominent as active bookings. */
.gantt-bar.status-arrived {
	background: #fff;
	color: var(--button-primary-admin);
	border: 2px solid var(--button-primary-admin);
	box-shadow: 0 1px 0 rgba(0,0,0,0.04);
}
.gantt-bar.status-arrived .gantt-bar-party {
	background: var(--button-primary-admin);
	color: #fff;
	border-color: var(--button-primary-admin);
}
.gantt-action-popup {
	position: absolute;
	display: flex;
	gap: 8px;
	padding: 6px;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: 8px;
	box-shadow: 0 6px 18px rgba(0,0,0,0.08);
}

/* Now-line indicator (current time) — thin, dotted and subtle */
.gantt-now-line {
    position: absolute;
    width: 1px; /* visual width, actual height set inline by script */
    background: transparent; /* use border for dotted effect */
    border-left: 1px dotted rgba(119,14,110,0.9); /* purple dotted line */
    pointer-events: none;
    z-index: 9999;
}

/* Positioning for the now-line is driven by CSS variables that the
   renderer sets on the outer `#slots-gantt` element. This keeps the
   visual styling purely in CSS while allowing the script to compute
   pixel-perfect placement without writing inline styles on the element. */
.gantt-now-line {
	left: var(--gantt-now-left, auto);
	top: var(--gantt-now-top, 0);
	height: var(--gantt-now-height, 100%);
	width: 0px; /* visual line is produced by the border */
}

/* Structured popup layout for booking actions */
.gantt-action-popup { flex-direction: column; padding: 12px; min-width: 260px; }
.gantt-action-popup .gantt-popup-hdr { display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; }
/* Title: keep on a single line to avoid vertical wrapping */
.gantt-action-popup .gantt-popup-title { font-weight:700; flex: 1 1 auto; margin-right:8px; white-space: nowrap; overflow: hidden; text-overflow: clip; }
/* Close/Return button: make compact so the title has more room */
.gantt-action-popup .gantt-popup-close { background: var(--button-primary-admin); color: #fff; border:1px solid var(--button-primary-admin); padding:4px 8px; border-radius:10px; cursor:pointer; min-width:0; font-size: 0.86rem; line-height:1; flex: 0 0 auto; }
.gantt-action-popup .gantt-popup-details { margin-bottom:8px; font-size:0.95rem; }
.gantt-action-popup .gantt-popup-details div { margin-bottom:4px; }
.gantt-action-popup .gantt-popup-actions { display:flex; gap:8px; }
.gantt-action-popup .gantt-popup-actions button { flex:1; }
.gantt-action-popup .gantt-popup-actions button.secondary { background:none; color: var(--button-primary-admin); border:2px solid var(--button-primary-admin); }

/* Force-hide the Customer screen Business input only (defensive: covers cached HTML or runtime-inserted elements) */
label[for="customer-business"],
#customer-business {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Panels spacing used in bookings/slots screens */
#bookings-results.panel,
#slots-panel.panel {
	margin-top: 12px;
}

/* Customer register default hidden and small top margin */
#customer-register { display: none; margin-top: 10px; }

/* Gantt layout moved from inline JS into CSS so renderGantt can keep DOM simple */
.gantt-labels { display: inline-block; vertical-align: top; width: 140px; box-sizing: border-box; }
.gantt-content { display: inline-block; vertical-align: top; position: relative; width: calc(100% - 140px); box-sizing: border-box; padding-right: 20px; }
.gantt-timeline { position: absolute; left: 140px; right: 0; top: 0; height: 28px; }
.gantt-axis-tick { position: absolute; top: 0; transform: translateX(-50%); font-size: 0.85rem; color: #666; }
.gantt-rows { margin-top: 8px; }
.gantt-row { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.gantt-row-label { flex: 0 0 140px; box-sizing: border-box; padding-left: 8px; height: 44px; display:flex; align-items:center; }
.gantt-row-lane { position: relative; flex: 1 1 auto; height: 40px; }

/* Bars: left/width are set via CSS variables by the script, rest of visual layout in CSS */
.gantt-bar { position: absolute; left: var(--left, 0); width: var(--width, 0); height: 28px; padding: 4px 6px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; display: flex; align-items: center; justify-content: space-between; gap: 8px; box-sizing: border-box; }
.gantt-bar .gantt-bar-label { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gantt-bar .gantt-bar-party { margin-left: 8px; }

/* Overrides for table-group booking bars: make purple visuals blue (#1F3B6D)
   Ensure all elements that normally use the admin purple are overridden,
   including arrived variations. Use high specificity and !important so
   these override inline or variable-driven styles. */
.gantt-bar.gantt-bar-group {
	background: #1F3B6D !important;
	color: #ffffff !important;
	border: none !important;
	box-shadow: 0 1px 0 rgba(0,0,0,0.06) !important;
}
.gantt-bar.gantt-bar-group .gantt-bar-party {
	background: #ffffff !important;
	color: #1F3B6D !important;
	border-color: #1F3B6D !important;
}
/* Arrived bars use outlined style — maintain that but use the blue colour */
.gantt-bar.status-arrived.gantt-bar-group {
	background: #ffffff !important;
	color: #1F3B6D !important;
	border: 2px solid #1F3B6D !important;
	box-shadow: 0 1px 0 rgba(0,0,0,0.04) !important;
}
.gantt-bar.status-arrived.gantt-bar-group .gantt-bar-party {
	background: #1F3B6D !important;
	color: #ffffff !important;
	border-color: #1F3B6D !important;
}

/* Keep now-line visuals in CSS (positioning written by script or generated stylesheet) */
.gantt-now-line { border-left: 1px dotted rgba(119,14,110,0.9); background: transparent; pointer-events: none; }

/* Status badges used in bookings/stations */
.status-badge { display: inline-block; padding: 6px 10px; margin-left: 8px; border-radius: 18px; font-size: 0.85em; }
.status-badge.refunded { background: #f8d7da; color: #842029; }
/* Sent badge: green theme (similar to success) */
.status-badge.sent { background: #d4edda; color: #155724; }
.status-badge.sent { background: #e9ecef; color: #343a40; }

/* Delivery badge: blue theme */
.status-badge.delivery { background: #dbeeff; color: #063a6b; }

/* Delivered badge: green/teal theme */
.status-badge.delivered { background: #e6f9f0; color: #0b4f3a; font-weight: 700; margin-left: 8px; }

/* Delivered action button shown to drivers */
.delivered-btn {
	/* Match base button sizing and font so Delivered matches Override visually */
	background: var(--button-primary-admin);
	border: 0;
	color: #fff;
	padding: 12px 16px;
	border-radius: 16px;
	font-size: 1rem;
	line-height: 1;
	font-weight: 400;
}
.delivered-btn:disabled { opacity: 0.6; cursor: not-allowed; }

/* Order-level delivery highlight: subtle blue left border */
.order.delivery { border-left: 4px solid #2f7bd6; }

/* ETA badge styling: subtle teal/blue variant to stand out from Delivery badge */
.status-badge.eta { background: #eaf7ff; color: #064a6b; margin-left: 8px; font-weight: 600; }

/* ETA range pill: explicit defaults so the UI remains visible even if
	 inline styles become malformed by older cached JS. The script.js also
	 applies inline styles defensively after render. */
.status-badge.eta-range {
	background: #e6f7ff;
	color: #055;
	font-weight: 600;
	white-space: nowrap;
	padding: 4px 8px;
	border-radius: 999px;
	margin-left: 8px;
	display: inline-block;
	/* Add a small gap below the ETA range pill so following lines don't look cramped */
	margin-bottom: 8px;
}

/* Refund modal styling: center title and items, make items appear as selectable buttons */
#refund-items-sheet .ues-header { text-align: center; }
#refund-items-sheet .ues-body { text-align: center; padding: 12px 16px; }
#refund-items-sheet .refund-item-btn { display: inline-block; margin: 6px; padding: 8px 12px; border: 1px solid var(--button-primary-admin, #6b1f66); border-radius: 6px; background: var(--button-primary-admin, #6b1f66); color: #fff; cursor: pointer; min-width: 140px; text-align: center; transition: background 160ms ease, color 160ms ease, transform 120ms ease; }
#refund-items-sheet .refund-item-btn .refund-item-name { display: block; font-weight: 600; }
#refund-items-sheet .refund-item-btn .refund-item-qty { display: block; color: #666; font-size: 90%; }
#refund-items-sheet .refund-item-btn:not(.selected):hover { opacity: 0.95; transform: translateY(-2px); }
#refund-items-sheet .refund-item-btn.selected { background: #fff; color: var(--button-primary-admin, #6b1f66); border-color: var(--button-primary-admin, #6b1f66); box-shadow: 0 2px 8px rgba(0,0,0,0.06); }

/* Refunded badge */
#refund-items-sheet .refunded-badge { display: inline-block; margin-left: 8px; padding: 1px 6px; border-radius: 10px; font-size: 0.8em; background: rgba(255,255,255,0.9); color: var(--button-primary-admin, #6b1f66); border: 1px solid rgba(255,255,255,0.6); margin-top: -2px; }

/* inline refunded marker used in order item lists */
.refunded-inline { display: inline-block; margin-left: 6px; padding: 2px 6px; border-radius: 10px; font-size: 0.78em; background: #f8d7da; color: #842029; font-weight: 600; }
#refund-items-sheet .ues-actions.refund-actions { text-align: center; gap: 8px; display: flex; justify-content: center; padding: 12px 16px; }
#refund-items-sheet .ues-actions.refund-actions .button-inline { margin: 0 6px; }


/* Small utility styles for JS-created elements that previously used inline styles */
.admin-debug-panel {
	white-space: pre-wrap;
	background: #fff;
	border: 1px solid #ddd;
	padding: 8px;
	margin-top: 8px;
	font-size: 0.85rem;
	max-height: 220px;
	overflow: auto;
}

/* Small helpers to replace inline style snippets created by script.js */
.sheet-error {
	color: #a00;
	margin: 8px 12px;
	display: none;
}
.modal-title {
	margin-bottom: 12px;
}
.retry-wrap {
	margin-top: 8px;
}
.inline-row {
	display: flex;
	gap: 8px;
	align-items: center;
	flex-wrap: wrap;
}
.mt-8 { margin-top: 8px; }
.image-preview {
	max-width: 360px;
	max-height: 360px;
	overflow: hidden;
	border: 1px solid #ddd;
	padding: 6px;
	background: #fff;
}
.image-preview-img { max-width: 100%; display: block; }

.modal-overlay {
	position: fixed;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	background: rgba(0,0,0,0.45);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 9999;
}
.modal-inner {
	background: #fff;
	padding: 18px;
	border-radius: 8px;
	max-width: 420px;
	width: 100%;
	box-sizing: border-box;
	text-align: center;
}
.modal-btn-wrap { display: flex; gap: 8px; justify-content: center; }
.qr-image { max-width: 300px; width: 80%; height: auto; display: block; margin: 0 auto 12px; }
.qr-input { width: 100%; padding: 8px; box-sizing: border-box; margin-bottom: 8px; }
.qr-download { margin-left: 8px; }
.qr-wrap { margin-top: 8px; }

/* Let JS set tick horizontal position using --left */
.gantt-axis-tick { left: var(--left); }

/* Utility: prefer class-controlled visibility rather than frequent inline style writes */
.hidden { display: none !important; }
/* Small set of helper classes that the JS helper may add when a specific display
	type is required (inline-block / block / flex). These are intentionally
	named with a js-display- prefix to avoid colliding with existing class names. */
.js-display-inline-block { display: inline-block !important; }
.js-display-block { display: block !important; }
.js-display-flex { display: flex !important; }


/* Popups: allow JS to supply placement via --left/--top (fallback uses left/top). */
.gantt-action-popup {
	left: var(--left, auto);
	top: var(--top, auto);
}

/* Product image min-height is set via --min-h by JS when needed. */
.productimage { min-height: var(--min-h, auto); }

/* User edit sheet: slide from bottom via CSS-controlled transition. JS toggles
   the `.ues-open` class to reveal/hide it. */
.user-edit-sheet {
	position: fixed;
	left: 50%;
	transform: translateX(-50%);
	bottom: -120%; /* hidden by default off-screen */
	width: calc(100% - 32px);
	max-width: 760px;
	box-sizing: border-box;
	transition: bottom 280ms ease;
	z-index: 9999;
}
.user-edit-sheet.ues-open { bottom: 8px; }

/* ===== Fix: ensure admin/user edit sheets render consistently =====
   There are a couple of older/duplicated rules in this stylesheet that
   conflicted (".sheet.ues-open" vs ".user-edit-sheet.ues-open"). That
   could leave the sheet visible but mis-positioned or still hidden when
   JS only toggles the "ues-open" class. To be robust we force a
   consistent, centred slide-up behaviour here and ensure any element
   using the "sheet" class also benefits.
*/

/* Diagnostics: deliveries-range summary panel shown by script.js */
#deliveries-range-summary {
    box-sizing: border-box;
    margin: 8px 12px;
    padding: 8px 10px;
    border-radius: 8px;
    background: linear-gradient(180deg,#fffef8,#fff9e6);
    border: 1px solid rgba(255,210,77,0.9);
    font-family: monospace, system-ui, -apple-system, Segoe UI, Roboto, Arial;
    font-size: 13px;
    color: #222;
    max-height: 220px;
    overflow: auto;
}
.deliveries-range-row { padding: 4px 0; border-bottom: 1px dashed rgba(0,0,0,0.06); }
.user-edit-sheet,
.table-edit-sheet,
.sheet {
		/* start hidden off-screen */
		display: none;
		position: fixed;
		left: 50%;
		transform: translateX(-50%);
		bottom: -140%;
		width: calc(100% - 32px);
		max-width: 760px;
		box-sizing: border-box;
		padding: 16px;
		border-radius: 12px;
		background: var(--surface);
		box-shadow: 0 6px 20px rgba(0,0,0,0.12);
		transition: bottom 280ms ease, opacity 200ms ease, transform 200ms ease;
		opacity: 0;
		z-index: 9999;
}

/* When opened, ensure display and positioning are unambiguous */
.user-edit-sheet.ues-open,
.table-edit-sheet.ues-open,
.sheet.ues-open {
		display: block !important;
		bottom: 8px !important;
		left: 50% !important;
		right: auto !important;
		transform: translateX(-50%) !important;
		opacity: 1 !important;
}

/* Small responsive tweak so sheet uses full width on very small screens */
@media (max-width:420px){
	.user-edit-sheet, .table-edit-sheet, .sheet { left: 8px; right: 8px; transform: none; width: calc(100% - 16px); }
	.user-edit-sheet.ues-open, .table-edit-sheet.ues-open, .sheet.ues-open { left: 8px !important; right: 8px !important; transform: none !important; }
}

/* Deliveries tracker styles */
.deliveries-list{ display:flex; flex-direction:column; gap:12px; }
.delivery-card{ padding:12px 16px; }
.delivery-card-hdr{ display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; min-height:56px; }
.delivery-eta{ display:flex; align-items:center; gap:8px; white-space:nowrap; margin-left:12px; }
.delivery-ref{ display:flex; align-items:center; }
.delivery-ref{ font-weight:600; }
.delivery-tracker{ display:flex; gap:12px; align-items:center; overflow:auto; }
.delivery-step{ display:flex; flex-direction:column; align-items:center; width:140px; opacity:0.45; flex:0 0 auto; }
.delivery-step.active{ opacity:1; }
.step-dot{ width:14px; height:14px; border-radius:50%; background:#ccc; margin-bottom:6px; }
.delivery-step.active .step-dot{ background:#007bff; }
.step-label{ font-size:13px; text-align:center; }
.delivery-details{ margin-top:8px; font-size:13px; }

@media (max-width:600px){
  .delivery-step{ width:90px; }
  .delivery-card{ padding:10px; }
}

/* Vertical-centering fixes for the deliveries header (right-hand timestamp / badges) */
.delivery-card-hdr .delivery-eta{
	display: flex;
	align-items: center; /* center contents vertically via flexbox */
	gap: 8px;
	margin-left: 12px;

.eta-label { white-space: nowrap; margin-left: 6px; font-weight: 600; }
.eta-debug { font-family: monospace; font-size: 12px; color: #666; margin-top: 6px; }
	align-self: center; /* ensure the group sits in the middle of the header */
	height: auto; /* let the header's min-height define the box; don't force height */
}
.delivery-card-hdr .delivery-eta *{
	display: inline-flex;
	align-items: center;
}
.delivery-card-hdr .delivery-eta .status-badge,
.delivery-card-hdr .delivery-eta .badge,
.delivery-card-hdr .delivery-eta .pill{
	margin-left: 8px;
	vertical-align: middle;
}
.delivery-card-hdr .delivery-eta span{
	display: inline-flex;
	align-items: center;
	line-height: 1; /* avoid baseline shifts */
}

@media (max-width:600px){
	.delivery-card-hdr .delivery-eta{ margin-left:8px; }
}


/* Ensure header-range is visible and styled consistently */
.header-range{
	display: inline-block !important;
	background: #e6f7ff !important;
	color: #055 !important;
	padding: 3px 8px !important;
	border-radius: 999px !important;
	margin-left: 8px !important;
	font-weight: 600 !important;
	font-size: 12px !important;
	vertical-align: middle !important;
	z-index: 9999 !important;
}

/* Temporary: hide overlay elements that can occlude header-range during debugging */
.eta-overlay{ display: none !important; }