:root{
	--bg:#f4f6fb;
	--card:#ffffff;
	--muted:#4b5563;
	--accent:#6d28d9;
	--accent-600:#4c1d95;
	--brand-green:#25592d;
	--btn-bg:var(--brand-green);
	--btn-text:#ffffff;
	--danger:#dc2626;
	--radius:12px;
}

*{box-sizing:border-box}
body{background:var(--bg); margin:0; color:#0f172a; font-family:Inter, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial}
.app-shell{min-height:100vh;display:flex;flex-direction:column}
.topbar{
	background: #25592d;
	color: white;
	padding: 0.75rem 1.25rem;
	display: flex;
	align-items: center;
	justify-content: space-between;
	box-shadow: 0 6px 22px rgba(37,89,45,0.12);
	position: sticky;
	top: 0;
	z-index: 60;
}
.brand{font-weight:800;font-size:1.15rem;letter-spacing:0.02em;display:flex;align-items:center;gap:10px}

/* Logo in navbar: light background and sizing */
.brand-logo{background:#e7cf92;padding:6px;border-radius:8px;display:inline-flex;align-items:center}
.brand-logo img{height:36px;width:auto;display:block}
.brand-text{color:white;font-weight:700;font-size:1rem}


/* Topbar specific actions */
.topbar .top-actions{display:flex;align-items:center;gap:8px;width:100%}
.top-actions .nav-left{display:flex;align-items:center;gap:8px;margin-left:12px;padding-left:12px;border-left:1px solid rgba(255,255,255,0.12)}
.top-actions .nav-right{margin-left:auto}
.topbar .btn{border-radius:10px;padding:8px 12px;font-weight:600;font-size:0.95rem;text-decoration:none}
.topbar .btn.outline{background:transparent;color:white;border:1px solid rgba(255,255,255,0.18);box-shadow:none}
.topbar .btn:not(.outline){background:white;color:#25592d}

/* Button micro-interactions */
.topbar .btn{
	transition: background .14s ease, transform .06s ease, box-shadow .12s ease, color .12s ease;
	-webkit-font-smoothing:antialiased;
}
.topbar .btn.outline:hover{
	background: rgba(255,255,255,0.08);
	transform: translateY(-1px);
	text-decoration:none;
}
.topbar .btn.outline:active{ transform: translateY(0); }
.topbar .btn.outline:focus{ outline:2px solid rgba(255,255,255,0.12); outline-offset:2px }

.topbar .btn:not(.outline):hover{
	background: #ffffffcc;
	box-shadow: 0 8px 20px rgba(0,0,0,0.08);
}
.topbar .btn:not(.outline):active{
	transform: translateY(1px);
	box-shadow: none;
}

/* Slightly smaller buttons on narrow screens */
@media (max-width:640px){
	.topbar .btn{padding:6px 10px;font-size:0.92rem}
}
.container{display:flex;gap:1rem;padding:1.25rem;max-width:1100px;margin:1rem auto;width:100%}
.left-col{flex:1;display:flex;flex-direction:column;gap:1rem}
.right-col{width:320px}
.card{background:var(--card);border-radius:var(--radius);padding:1rem;box-shadow:0 8px 28px rgba(15,23,42,0.10)}
.label{font-size:0.85rem;color:var(--muted);margin-bottom:0.5rem}
.input{width:100%;padding:0.65rem;border:1px solid #dfe6f2;border-radius:8px;font-size:0.95rem;color:#0b1220}
.id-row{display:flex;gap:0.5rem;align-items:center;margin-top:0.5rem}
.id-input{width:140px}
.btn{padding:0.6rem 0.9rem;border-radius:8px;border:0;background:var(--btn-bg);color:var(--btn-text);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;font-size:0.95rem;text-decoration:none}
.btn.primary{background:var(--btn-bg);box-shadow:0 6px 18px rgba(0,0,0,0.08)}
.or{margin:0.5rem 0;color:var(--muted);font-size:0.85rem}
.muted{color:var(--muted);font-size:0.95rem}
.error{color:var(--danger);margin-top:0.5rem}
.purchase-actions{display:flex;gap:0.75rem;align-items:center;margin-top:0.75rem}

.suggestions{list-style:none;margin:0;padding:0;border:1px solid rgba(15,23,42,0.08);background:linear-gradient(180deg, #fff, #fbfbfe);max-height:220px;overflow:auto;border-radius:8px;margin-top:0.5rem}
.suggestions li{padding:0.6rem;border-bottom:1px solid #f3f4f6;cursor:pointer}
.suggestions li:hover{background:#f8fafc}
.suggestions .empty{color:var(--muted);padding:0.6rem}

.tx-list{list-style:none;padding:0;margin:0}
.tx-list li{padding:0.6rem;border-bottom:1px dashed #e6eefc;color:#0b1220}
/* hide legacy tx-list if rendered elsewhere */
.tx-list{display:none}

/* Simple table for coffees */
.simple-table{width:100%;border-collapse:collapse;font-size:0.98rem}
.simple-table thead th{text-align:left;padding:0.6rem 0.75rem;color:#071227;font-weight:700}
.simple-table tbody td{padding:0.6rem 0.75rem;border-top:1px solid #e6eefc;color:#071227}
.simple-table tbody tr:nth-child(even){background:linear-gradient(90deg, rgba(244,246,251,0.9), rgba(244,246,251,0.9))}
.simple-table tbody tr:hover{background:#f6f8fc}

/* compact variant reduces padding */
.simple-table.compact tbody td{padding:0.45rem 0.6rem}
.simple-table.compact thead th{padding:0.45rem 0.6rem}

/* Mobile card-based table layout */
@media (max-width:640px){
  /* Convert tables to stacked card layout */
  .simple-table{display:block}
  .simple-table thead{display:none}
  .simple-table tbody{display:block}
  .simple-table tbody tr{
    display:block;
    border:1px solid #e6eefc;
    border-radius:10px;
    margin-bottom:12px;
    padding:12px;
    background:#fff;
    box-shadow:0 2px 8px rgba(15,23,42,0.06);
  }
  .simple-table tbody tr:nth-child(even){background:#fff}
  .simple-table tbody td{
    display:block;
    padding:6px 0;
    border:0;
    border-bottom:1px solid #f3f4f6;
    text-align:left;
  }
  .simple-table tbody td:last-child{border-bottom:0}
  .simple-table tbody td::before{
    content:attr(data-label);
    display:block;
    font-weight:600;
    color:var(--muted);
    font-size:0.75rem;
    text-transform:uppercase;
    margin-bottom:2px;
  }
  /* Actions cell special handling */
  .simple-table tbody td.actions-cell{
    padding-top:12px;
    margin-top:4px;
  }
  .simple-table tbody td.actions-cell::before{
    display:none;
  }
  .simple-table .actions{
    display:flex;
    gap:8px;
    width:100%;
  }
  .simple-table .actions .btn{
    flex:1;
    min-width:80px;
  }
}

/* Reward info card */
.reward-card{padding:0.75rem 1rem}
.reward-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;align-items:stretch}
.reward-metric{background:linear-gradient(180deg, #fbfdf9, #ffffff);padding:0.8rem;border-radius:10px;border:1px solid #eef7ee;color:#0b1220;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:72px}
.reward-label{font-size:0.85rem;color:var(--muted);font-weight:600;text-transform:none}
.reward-value{font-size:1.6rem;font-weight:800;color:#071227;margin-top:6px}

/* positive/available reward value */
.reward-value.positive{color:#10b981}

@media (max-width:640px){
	.reward-grid{grid-template-columns:1fr}
	.reward-value{font-size:1.25rem}
}

/* Additional mobile responsiveness tweaks */
@media (max-width:640px) {
	.top-actions .nav-left{margin-left:0;padding-left:0;border-left:0;flex-wrap:wrap}
	.brand-text{font-size:0.95rem}
	.brand-logo img{height:28px}
	.container{padding:0.75rem;margin:0.6rem auto}
	.input{font-size:0.95rem}
	.btn{font-size:0.95rem}
	/* Make suggestion lists full width inside cards and float above content */
	.suggestions{position:relative;max-height:220px}
	/* Make actions stack on small screens */
	.purchase-actions{flex-direction:column;align-items:stretch}
	.purchase-actions .btn{width:100%}
	/* Reduce modal panel padding and ensure it fits mobile viewport */
	.modal-panel{max-width:96%;width:96%;padding:0.75rem}
	.modal-panel{max-height:90vh;overflow:auto}
	/* Make suggestions visually separated and tappable */
	.suggestions li{padding:0.9rem}
}

/* Pounds controls in purchase form */
.pounds-controls{display:flex;gap:10px;align-items:center}
.pounds-buttons{display:flex;gap:8px}
.pounds-buttons .btn.small{padding:0.45rem 0.95rem;min-width:72px;background:#f3f7f3;color:#071227;border:1px solid #e6efe6;text-align:center}
.pounds-buttons .btn.small:hover{background:#eef6ee}

/* Purchase form: place pounds controls and reward checkbox on one row */
.purchase-row{display:flex;align-items:center;gap:12px;margin-top:6px}
.pounds-controls{flex:1;min-width:160px}
.reward-control{display:flex;align-items:center;gap:8px;flex:0;white-space:nowrap}
.reward-label-inline{margin:0;font-weight:600;color:#0b1220}

@media (max-width:640px){
	.purchase-row{flex-direction:column;align-items:stretch}
	.pounds-controls{min-width:0}
	.reward-control{justify-content:flex-start}
}

/* Reward progress bar */
.reward-progress{margin-top:10px}
.progress-meta{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}
.progress-label{font-size:0.9rem;color:var(--muted);font-weight:600}
.progress-count{font-size:0.9rem;color:#071227;font-weight:700}
.progress-track{background:#eef6f0;border-radius:8px;height:12px;overflow:hidden;border:1px solid #e6efe6}
.progress-fill{height:100%;background:linear-gradient(90deg,#10b981,#059669);width:0;transition:width .35s ease}

@media (max-width:640px){
	.progress-meta{flex-direction:column;align-items:flex-start;gap:6px}
}


/* actions cell styling */
.simple-table .actions{display:flex;gap:0.5rem}
.btn.small{padding:0.35rem 0.6rem;border-radius:8px;font-size:0.9rem;background:var(--btn-bg);color:var(--btn-text)}
.btn.small:focus{outline:2px solid rgba(109,40,217,0.18)}
.btn.danger.small{background:var(--danger)}

/* reward badge in transactions table */
.reward-yes{color:#10b981;font-weight:700}

/* compact card spacing for denser layout */


.footer{padding:1rem;text-align:center;color:var(--muted);font-size:0.9rem}

/* Pager layout for coffees */
.pager{display:flex;align-items:center;gap:12px;margin-top:0.6rem}
.pager .muted{font-size:0.95rem}
.pager .input{height:36px;padding:0.35rem 0.5rem}

@media (max-width:900px){
	.container{flex-direction:column;padding:1rem}
	.right-col{width:100%}
}

/* Toast */
.toasts{position:fixed;right:20px;bottom:24px;display:flex;flex-direction:column-reverse;gap:0.6rem;z-index:200}
.toast{min-width:220px;max-width:360px;padding:0.75rem 1rem;border-radius:10px;color:#fff;box-shadow:0 8px 24px rgba(2,6,23,0.18);display:flex;align-items:center;gap:0.6rem}
.toast.success{background:linear-gradient(90deg,#10b981,#059669)}
.toast.error{background:linear-gradient(90deg,#ef4444,#dc2626)}
.toast[hidden]{display:none}
.toast .msg{font-weight:600}
.toast .close{margin-left:auto;background:transparent;border:0;color:rgba(255,255,255,0.95);font-size:1.1rem;cursor:pointer}

/* modal */
.modal{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;z-index:60}
.modal-backdrop{position:absolute;inset:0;background:rgba(2,6,23,0.5);backdrop-filter:blur(2px)}
.modal-panel{position:relative;z-index:70;max-width:720px;width:96%;padding:1rem}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:0.5rem}
.modal-actions{display:flex;justify-content:flex-end;gap:0.5rem;margin-top:0.75rem}
.modal-actions{display:flex;justify-content:space-between;gap:0.5rem;margin-top:0.75rem}
.modal-actions-left{}
.modal-actions-right{display:flex;gap:0.5rem}
.btn.danger{background:var(--danger);color:white}
.btn.outline{background:transparent;color:white;border:1px solid rgba(255,255,255,0.14);box-shadow:none}

@media (max-width:640px){.form-grid{grid-template-columns:1fr}}

/* Respect the HTML `hidden` attribute for modals */
.modal[hidden]{display:none !important}

/* Customer form styling with labels */
.customer-form{display:flex;flex-direction:column;gap:0.85rem}
.form-group{display:flex;flex-direction:column;gap:0.3rem}
.field-label{font-size:0.8rem;font-weight:600;color:#374151;text-transform:uppercase;letter-spacing:0.025em}
.notes-group{margin-top:0.2rem}
.textarea-notes{min-height:80px;resize:vertical;font-family:inherit;line-height:1.5}

/* ========================================
   MOBILE & TABLET RESPONSIVE STYLES
   ======================================== */

/* Hamburger menu toggle button - hidden on desktop */
.nav-toggle{
  display:none;
  background:transparent;
  border:0;
  padding:8px;
  cursor:pointer;
  z-index:100;
  order:2;
}
.hamburger{
  display:block;
  width:24px;
  height:2px;
  background:white;
  position:relative;
  transition:background .2s ease;
}
.hamburger::before,
.hamburger::after{
  content:'';
  position:absolute;
  left:0;
  width:24px;
  height:2px;
  background:white;
  transition:transform .2s ease, top .2s ease;
}
.hamburger::before{top:-7px}
.hamburger::after{top:7px}
/* Animate to X when open */
.nav-toggle.open .hamburger{background:transparent}
.nav-toggle.open .hamburger::before{top:0;transform:rotate(45deg)}
.nav-toggle.open .hamburger::after{top:0;transform:rotate(-45deg)}

/* Tablet breakpoint (768px - 900px) */
@media (max-width:900px) and (min-width:641px){
  .topbar{padding:0.6rem 1rem}
  .topbar .btn{padding:6px 10px;font-size:0.9rem}
  .brand-text{font-size:0.9rem}
  .brand-logo img{height:32px}
  .container{flex-direction:column;padding:1rem;gap:1rem}
  .right-col{width:100%}
  .reward-grid{grid-template-columns:repeat(2,1fr)}
}

/* Mobile breakpoint (up to 640px) */
@media (max-width:640px){
  /* Show hamburger, hide nav by default */
  .nav-toggle{display:flex;align-items:center;justify-content:center}
  .topbar{
    display:flex !important;
    flex-direction:row !important;
    flex-wrap:wrap;
    align-items:center;
    justify-content:space-between;
    padding:0.6rem 0.75rem;
  }
  .topbar .brand{order:1}
  .topbar .nav-toggle{order:2}
  .topbar .top-actions{
    display:none !important;
    flex-direction:column;
    width:100%;
    gap:0;
    margin-top:0.5rem;
    background:#1e4a26;
    border-radius:8px;
    padding:0.5rem;
    order:3;
    flex-basis:100%;
  }
  .topbar .top-actions.open{display:flex !important}
  .top-actions .nav-left,
  .top-actions .nav-right{
    display:flex;
    flex-direction:column;
    width:100%;
    margin:0;
    padding:0;
    border:0;
    gap:4px;
  }
  .top-actions .nav-left{border-bottom:1px solid rgba(255,255,255,0.1);padding-bottom:8px;margin-bottom:8px}
  .topbar .btn{
    width:100%;
    justify-content:center;
    padding:10px 12px;
    font-size:0.95rem;
    border-radius:6px;
  }
  .brand{flex:1}
  .brand-text{font-size:0.9rem}
  .brand-logo img{height:28px}

  /* Container and cards */
  .container{padding:0.6rem;margin:0.4rem auto;gap:0.75rem}
  .card{padding:0.85rem;border-radius:10px}
  h3{font-size:1.05rem;margin:0 0 0.6rem 0}

  /* Inputs and buttons touch-friendly */
  .input{padding:0.75rem;font-size:1rem;border-radius:8px}
  .btn{padding:0.7rem 1rem;font-size:1rem;min-height:44px}
  .btn.small{padding:0.5rem 0.75rem;min-height:40px}

  /* ID row stacks on very small screens */
  .id-row{flex-direction:column;gap:0.5rem}
  .id-input{width:100%}

  /* Purchase form improvements */
  .purchase-row{flex-direction:column;align-items:stretch;gap:10px}
  .pounds-controls{width:100%;min-width:0;flex-direction:column;gap:8px}
  .pounds-buttons{width:100%;justify-content:stretch}
  .pounds-buttons .btn.small{flex:1;min-width:0;padding:0.6rem}
  .pounds-controls .input{width:100%}
  .reward-control{justify-content:flex-start;padding:8px 0}

  /* Suggestions touch-friendly */
  .suggestions{max-height:200px}
  .suggestions li{padding:12px;font-size:0.95rem}

  /* Table card container */
  .tx-card{overflow:visible}

  /* Reward grid single column */
  .reward-grid{grid-template-columns:1fr;gap:8px}
  .reward-metric{padding:0.6rem;min-height:60px}
  .reward-value{font-size:1.3rem}
  .reward-label{font-size:0.8rem}

  /* Progress bar */
  .progress-meta{flex-direction:column;align-items:flex-start;gap:4px}
  .progress-track{height:10px}

  /* Pager stacks */
  .pager{flex-direction:column;gap:8px;align-items:stretch}

  /* Modal full-screen on mobile */
  .modal-panel{
    max-width:100%;
    width:100%;
    max-height:100vh;
    height:100%;
    border-radius:0;
    padding:1rem;
    overflow-y:auto;
  }
  .modal-actions{flex-direction:column;gap:8px}
  .modal-actions-left,.modal-actions-right{width:100%;display:flex;flex-direction:column;gap:8px}
  .modal-actions .btn{width:100%}

  /* Toasts position */
  .toasts{right:10px;left:10px;bottom:16px}
  .toast{min-width:0;max-width:100%}

  /* Customer form */
  .customer-form{gap:0.7rem}
  .form-group{gap:0.25rem}
}

/* Very small phones (up to 380px) */
@media (max-width:380px){
  .brand-text{display:none}
  .brand-logo img{height:32px}
  .topbar{padding:0.5rem}
  .container{padding:0.5rem}
  .card{padding:0.7rem}
  .btn{font-size:0.9rem;padding:0.6rem 0.8rem}
}