* { box-sizing: border-box; }
:root {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #151515;
  background: #f3f3f3;
}
body { margin: 0; min-height: 100vh; }
button, input, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }

.home { display:flex; align-items:center; justify-content:center; }
.home-wrap { width:min(1000px,92vw); text-align:center; padding:40px 0; }
.home h1 { font-size:clamp(2rem,5vw,4rem); margin:.2em 0 0; }
.subtitle { font-size:1.2rem; opacity:.65; margin-top:0; }
.department-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin:45px 0 30px; }
.department-card {
  min-height:220px; display:flex; flex-direction:column; justify-content:center; align-items:center;
  gap:15px; text-decoration:none; color:inherit; background:#fff; border-radius:20px;
  box-shadow:0 6px 25px rgba(0,0,0,.09); font-size:clamp(1.4rem,3vw,2rem); font-weight:800;
  transition:transform .1s ease, box-shadow .1s ease;
}
.department-card:active { transform:scale(.98); box-shadow:0 2px 8px rgba(0,0,0,.12); }
.dept-icon { font-size:4rem; }
.admin-link { color:#555; }

.topbar { min-height:68px; display:grid; grid-template-columns:150px 1fr 150px; align-items:center; gap:10px; padding:10px 18px; background:#111; color:#fff; }
.topbar h1 { text-align:center; font-size:1.35rem; margin:0; }
.back, .admin-small { color:#fff; text-decoration:none; font-weight:700; }
.admin-small { text-align:right; opacity:.75; }
.till-layout { display:grid; grid-template-columns:minmax(0,1fr) 430px; min-height:calc(100vh - 68px); }
.products-panel { padding:18px; overflow:auto; }
.product-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:14px; }
.product-button {
  min-height:125px; border:0; border-radius:16px; background:#fff; box-shadow:0 3px 14px rgba(0,0,0,.08);
  display:flex; flex-direction:column; justify-content:center; gap:10px; cursor:pointer; padding:16px;
}
.product-button:active { transform:scale(.97); }
.product-name { font-size:1.2rem; font-weight:750; }
.product-price { font-size:1.35rem; font-weight:850; }
.empty-products { padding:40px; text-align:center; background:#fff; border-radius:15px; }
.empty-products span { display:block; opacity:.6; margin-top:8px; }

.basket-panel { background:#fff; border-left:1px solid #ddd; padding:18px; display:flex; flex-direction:column; min-height:0; }
.basket-head { display:flex; align-items:center; justify-content:space-between; }
.basket-head h2 { margin:0 0 12px; }
.secondary,.small { border:1px solid #ccc; background:#f5f5f5; border-radius:9px; padding:8px 12px; cursor:pointer; }
.basket { flex:1; overflow:auto; min-height:150px; }
.empty-basket { opacity:.5; text-align:center; padding:60px 10px; }
.basket-row { display:grid; grid-template-columns:1fr auto auto; gap:10px; align-items:center; padding:13px 0; border-bottom:1px solid #eee; }
.basket-info span { display:block; font-size:.82rem; opacity:.55; margin-top:3px; }
.qty { display:flex; align-items:center; gap:6px; }
.qty button { width:36px; height:36px; border:1px solid #ccc; background:#f6f6f6; border-radius:8px; font-size:1.3rem; }
.line-total { min-width:70px; text-align:right; }
.total-row { display:flex; justify-content:space-between; align-items:center; border-top:3px solid #111; padding:17px 0; font-size:1.4rem; }
.total-row strong { font-size:2rem; }
.pay-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.pay { min-height:78px; border:0; border-radius:14px; color:#fff; font-size:1.35rem; font-weight:850; cursor:pointer; }
.pay.cash { background:#333; }
.pay.card { background:#555; }
.pay:disabled { opacity:.5; }
.status { min-height:42px; display:flex; align-items:center; justify-content:center; text-align:center; font-weight:800; margin-top:10px; border-radius:10px; }
.status.success { background:#dff4df; }
.status.error { background:#f8dede; color:#8d1111; }

.admin-login { display:flex; align-items:center; justify-content:center; }
.login-card { width:min(400px,90vw); background:#fff; padding:30px; border-radius:16px; box-shadow:0 5px 25px rgba(0,0,0,.1); }
.login-card h1 { margin-top:0; }
.login-card label { display:block; font-weight:700; margin:20px 0; }
.login-card input { width:100%; margin-top:7px; padding:12px; border:1px solid #bbb; border-radius:8px; }
.primary { border:0; border-radius:9px; background:#111; color:#fff; padding:12px 18px; cursor:pointer; font-weight:800; }
.login-card a { display:block; margin-top:18px; color:#333; }
.error { color:#9b111e; }

.admin-wrap { width:min(1200px,94vw); margin:25px auto 60px; display:grid; gap:20px; }
.admin-card { background:#fff; padding:22px; border-radius:14px; box-shadow:0 3px 15px rgba(0,0,0,.06); }
.admin-card h2 { margin-top:0; }
.summary-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:15px; }
.summary-box { padding:18px; border:1px solid #ddd; border-radius:12px; }
.summary-box h3 { margin:0 0 8px; }
.summary-box strong { display:block; font-size:2rem; }
.summary-box span,.summary-box small { display:block; opacity:.65; margin-top:4px; }
.product-form { display:grid; grid-template-columns:2fr 1fr 1fr auto; gap:10px; }
.product-form input,.product-form select { padding:11px; border:1px solid #bbb; border-radius:8px; }
.table-wrap { overflow:auto; }
table { width:100%; border-collapse:collapse; }
th,td { text-align:left; padding:10px; border-bottom:1px solid #eee; white-space:nowrap; }

@media (max-width: 800px) {
  .department-grid { grid-template-columns:1fr; }
  .department-card { min-height:150px; }
  .till-layout { grid-template-columns:1fr; }
  .basket-panel { border-left:0; border-top:1px solid #ddd; min-height:45vh; }
  .topbar { grid-template-columns:90px 1fr 70px; }
  .admin-small { font-size:.8rem; }
  .summary-grid { grid-template-columns:1fr; }
  .product-form { grid-template-columns:1fr; }
}


.filters { padding-bottom: 16px; }
.filter-form { display:flex; flex-wrap:wrap; gap:12px; align-items:end; }
.filter-form label { display:flex; flex-direction:column; gap:6px; font-weight:700; }
.filter-form input,.filter-form select { padding:10px; border:1px solid #bbb; border-radius:8px; background:#fff; }
.secondary-link { display:inline-flex; align-items:center; padding:10px 14px; border:1px solid #bbb; border-radius:9px; color:#222; text-decoration:none; }
.headline-total { font-size:clamp(2.5rem,6vw,4rem); font-weight:900; line-height:1; }
.headline-meta { margin-top:10px; opacity:.65; }
.note { opacity:.6; font-size:.9rem; }
.product-list { margin-top:20px; }
@media (max-width: 700px) {
  .filter-form { display:grid; grid-template-columns:1fr 1fr; }
  .filter-form label { min-width:0; }
  .filter-form .primary,.filter-form .secondary-link { width:100%; justify-content:center; }
}

/* Pig's Ear festival branding */
.pos-brand{width:100%;overflow:hidden;background:#05080d;border-bottom:3px solid #b21f24}
.pos-brand img{display:block;width:100%;height:clamp(72px,13vw,135px);object-fit:cover;object-position:left center}
.brand-mini{width:190px;height:46px;overflow:hidden;background:#05080d;flex:0 0 auto}
.brand-mini img{width:100%;height:100%;object-fit:cover;object-position:left center}
.print-brand{display:none}
.print-brand img{display:block;width:100%;max-height:110px;object-fit:cover;object-position:left center;margin-bottom:8px}
@media print{.print-brand{display:block;margin-bottom:14px;text-align:center;font-weight:700;letter-spacing:.08em}}

.tender-panel { border:1px solid #ddd; border-radius:14px; padding:12px; margin-bottom:12px; background:#fafafa; }
.tender-head,.tender-detail { display:flex; justify-content:space-between; align-items:center; }
.tender-head { font-size:.9rem; opacity:.8; }
.tender-head strong { font-size:1.8rem; color:#111; opacity:1; }
.tender-detail { padding-top:7px; font-size:.9rem; }
.tender-detail strong { font-size:1.15rem; }
.keypad { display:grid; grid-template-columns:repeat(4,1fr); gap:7px; margin-top:10px; }
.keypad button { min-height:48px; border:1px solid #ccc; border-radius:9px; background:#fff; font-size:1.25rem; font-weight:800; cursor:pointer; box-shadow:0 1px 2px rgba(0,0,0,.04); }
.keypad button:active { transform:scale(.97); background:#eee; }
.keypad .keypad-back { background:#eee; }
.tender-hint { min-height:18px; margin-top:8px; text-align:center; font-size:.75rem; opacity:.55; }
@media (max-width:800px) { .tender-panel { max-width:520px; margin-left:auto; margin-right:auto; } .keypad button { min-height:52px; } }

.topbar:has(.brand-mini) { grid-template-columns:190px 90px 1fr 90px; }
@media (max-width:800px) { .topbar:has(.brand-mini) { grid-template-columns:120px 55px 1fr 55px; } .brand-mini { width:120px; } }


/* Fixed till layout: only the basket itself scrolls. */
body.till {
  width: 100%;
  height: 100%;
  height: 100dvh;
  overflow: hidden;
  overscroll-behavior: none;
}
body.till .topbar {
  flex: 0 0 68px;
}
body.till .till-layout {
  height: calc(100dvh - 68px);
  min-height: 0;
  overflow: hidden;
}
body.till .products-panel {
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
body.till .basket-panel {
  min-height: 0;
  overflow: hidden;
}
body.till .basket {
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
}
body.till .tender-panel {
  flex: 0 0 auto;
}
body.till .pay-grid {
  flex: 0 0 auto;
}

/* Compact 3 x 4 till keypad */
body.till .keypad {
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin-top: 8px;
}
body.till .keypad button {
  min-height: 42px;
  height: 42px;
  padding: 0;
  font-size: 1.12rem;
  border-radius: 8px;
  touch-action: manipulation;
}
body.till .tender-hint {
  min-height: 0;
  margin-top: 5px;
  line-height: 1.15;
}

@media (max-width: 800px) {
  body.till .till-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
  }
  body.till .products-panel {
    min-width: 0;
  }
  body.till .basket-panel {
    border-top: 0;
    border-left: 1px solid #ddd;
    min-height: 0;
    height: 100%;
  }
  body.till .keypad button {
    min-height: 40px;
    height: 40px;
  }
}

@media (max-width: 600px) {
  body.till .till-layout {
    grid-template-columns: minmax(0, 1fr) 330px;
  }
  body.till .topbar {
    min-height: 58px;
  }
  body.till .till-layout {
    height: calc(100dvh - 58px);
  }
}

/* Admin pages remain normally scrollable. The fixed viewport rules apply only to the till. */
body.admin { min-height:100vh; overflow-y:auto; overflow-x:hidden; }

/* Admin page: restore normal document scrolling */
body.admin {
    height: auto !important;
    min-height: 100vh !important;
    overflow: auto !important;
}

body.admin html {
    height: auto !important;
    overflow: auto !important;
}

body.admin .admin-wrap {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
}

body.admin .admin-content,
body.admin main,
body.admin .page {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
}

/* Document root must remain scrollable outside the till */
html {
    height: auto !important;
    overflow: auto !important;
}

/* Till: maximise basket, minimise fixed controls */
body.till .basket-panel {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

body.till .basket {
    flex: 1 1 auto;
    min-height: 0;
}

body.till .tender-panel {
    flex: 0 0 auto;
    padding-top: 6px;
    padding-bottom: 6px;
}

body.till .keypad {
    gap: 4px;
    margin-top: 5px;
}

body.till .keypad button {
    min-height: 36px;
    height: 36px;
    font-size: 1rem;
    border-radius: 7px;
}

body.till .pay-grid {
    gap: 6px;
    margin-top: 6px;
}

body.till .pay-grid button {
    min-height: 42px;
    height: 42px;
    font-size: 1rem;
    padding: 4px 8px;
}

body.till .tender-input,
body.till input[name="tender"] {
    min-height: 36px;
    height: 36px;
    font-size: 1.1rem;
}

body.till .tender-hint {
    margin-top: 3px;
    font-size: .7rem;
}

/* FINAL TILL LAYOUT: basket maximised, controls pinned to bottom */

body.till .basket-panel {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    padding-bottom: 4px;
}

body.till .basket {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
}

/* Keep the payment/control area compact at the bottom */
body.till .tender-panel {
    flex: 0 0 auto;
    margin-top: auto;
    padding-top: 3px;
    padding-bottom: 3px;
}

/* Compact keypad */
body.till .keypad {
    gap: 3px;
    margin-top: 3px;
}

body.till .keypad button {
    min-height: 34px;
    height: 34px;
    padding: 0;
    font-size: .95rem;
    border-radius: 6px;
}

/* Compact payment buttons */
body.till .pay-grid {
    gap: 5px;
    margin-top: 4px;
}

body.till .pay-grid button {
    min-height: 38px;
    height: 38px;
    padding: 2px 6px;
    font-size: .95rem;
}

/* Keep the tender information tight */
body.till .tender-hint {
    margin-top: 2px;
    font-size: .65rem;
    line-height: 1;
}

/* Compact tender amount display */
body.till .tender-input,
body.till input[name="tender"] {
    min-height: 32px;
    height: 32px;
    font-size: 1rem;
}

/* FINAL: make the till occupy the entire viewport below the header */
html,
body.till {
    margin: 0;
    padding: 0;
    height: 100dvh !important;
    overflow: hidden !important;
}

body.till {
    display: flex;
    flex-direction: column;
}

body.till .topbar {
    flex: 0 0 68px;
}

body.till .till-layout {
    flex: 1 1 auto !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: hidden !important;
}

/* Basket panel fills all available height */
body.till .basket-panel {
    height: 100% !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
}

/* Basket takes all space not needed by the controls */
body.till .basket {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
}

/* Controls sit at the absolute bottom of the basket panel */
body.till .tender-panel {
    flex: 0 0 auto !important;
    margin-top: auto !important;
}

/* Pin till controls to the absolute bottom of the basket panel */
body.till .basket-panel {
    position: relative !important;
    overflow: hidden !important;
}

body.till .basket-panel .tender-panel {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    margin: 0 !important;
    padding: 3px 0 4px !important;
    z-index: 10 !important;
    background: #fff !important;
}

/* Basket occupies everything above the fixed controls */
body.till .basket-panel .basket {
    height: 100% !important;
    max-height: 100% !important;
    padding-bottom: 230px !important;
    box-sizing: border-box !important;
    overflow-y: auto !important;
}

/* Correct final till basket/control layout */
body.till .basket-panel {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
    height: 100% !important;
    overflow: hidden !important;
}

/* Basket header stays at the top */
body.till .basket-head {
    flex: 0 0 auto !important;
}

/* Basket gets all available space between header and controls */
body.till .basket-panel .basket {
    position: relative !important;
    flex: 1 1 auto !important;
    height: auto !important;
    max-height: none !important;
    min-height: 0 !important;
    padding-bottom: 8px !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    touch-action: pan-y !important;
}

/* Controls are normal flex content at the bottom */
body.till .basket-panel .tender-panel {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    flex: 0 0 auto !important;
    margin: 0 !important;
    padding: 3px 0 4px !important;
    z-index: 1 !important;
    background: #fff !important;
}

/* Compact keypad */
body.till .keypad {
    gap: 3px !important;
    margin-top: 3px !important;
}

body.till .keypad button {
    min-height: 34px !important;
    height: 34px !important;
    padding: 0 !important;
    font-size: .95rem !important;
}

/* Compact CASH/CARD buttons */
body.till .pay-grid {
    gap: 5px !important;
    margin-top: 4px !important;
}

body.till .pay-grid button {
    min-height: 38px !important;
    height: 38px !important;
    padding: 2px 6px !important;
    font-size: .95rem !important;
}

/* Keep basket prices clear of the scrollbar */
body.till .basket {
    padding-right: 18px !important;
    box-sizing: border-box !important;
}

body.till .basket-row {
    padding-right: 6px;
    box-sizing: border-box;
}

/* === FINAL PAGE SCROLL FIX === */

/* Normal pages, including Admin, scroll normally */
html,
body {
    height: auto !important;
    min-height: 100% !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
}

/* ONLY the actual till gets a locked viewport */
html:has(body.till),
body.till {
    height: 100dvh !important;
    overflow: hidden !important;
}

body.till {
    display: flex !important;
    flex-direction: column !important;
}

/* Till layout fills the space below the header */
body.till .till-layout {
    flex: 1 1 auto !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: hidden !important;
}

/* Admin explicitly remains a normal scrolling document */
body.admin,
body.admin-login {
    height: auto !important;
    min-height: 100vh !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
}