:root{
  --brand:#f26522;
  --ink:#222;
  --muted:#666;
  --line:#eee;
  --chip:#f7f7f7;
  --card:#fff;
  --bg:#fafafa;
  --radius:16px;
}

*{box-sizing:border-box}
html,body{
  height: 100%;
  margin:0;
  padding:0;
  background:var(--bg);
  color:var(--ink);
  font:14px/1.45 "Comfortaa", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}



.hidden{display:none !important}

/* Header */
.appbar{
  position:sticky;top:0;z-index:10;background:#fff;border-bottom:1px solid var(--line);
  display:flex;align-items:center;justify-content:space-between;padding:.6rem 1rem
}
.brand{display:flex;align-items:center;gap:.7rem;text-decoration: none;color: inherit;}
.logo{height:44px}
.title{font-size:18px;margin:0;font-weight:700;letter-spacing:.2px;color:var(--brand)}

.btn{
  border-radius:999px;padding:.5rem 1rem;border:1px solid var(--brand);font-weight:700;cursor:pointer
}
.btn.primary{background:var(--brand);color:#fff}
.btn.primary:hover{filter:brightness(.98)}
.btn.ghost{background:#fff;color:var(--brand)}
.btn.ghost:hover{background:color-mix(in srgb, var(--brand) 12%, #fff)}
.print-btn{
  border-radius:999px;padding:.5rem 1rem;border:1px solid var(--brand);
  background:#fff;color:var(--brand);font-weight:700;cursor:pointer
}
.print-btn:hover{background:color-mix(in srgb, var(--brand) 12%, #fff)}

/* Form */
.container{width: min(95vw, 1900px);margin:0 auto;padding:1rem 2rem;flex: 1 1 0 auto;}

@media (max-width:1024px){
  .container{width:100%; padding: 1rem 1.25rem; }
}


.lookup{
  display:grid;grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:1rem;align-items:end;background:var(--card);border:1px solid var(--line);
  border-radius:var(--radius);padding:1rem
}

@media (max-width: 768px){
  .lookup input{ font-size: 16px; }
}

.field{display:flex;flex-direction:column;gap:.3rem}
label{font-size:.85rem;font-weight:700;color:#333}
input{
  padding:.45rem .6rem;border-radius:.6rem;border:1px solid #ddd;background:#fff;font:inherit
}
#viewBtn{justify-self:start}

/* Results */
.results{margin-top:1rem}
.chips{display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:.75rem}
.chips button{
  padding:.35rem .75rem;border:1px solid #ddd;border-radius:999px;background:var(--chip);cursor:pointer
}
.chips button.active{border-color:var(--brand);color:var(--brand);background:color-mix(in srgb, var(--brand) 10%, #fff)}

/* Viewer – single column now (no sidebar) */
.viewer{display:grid;grid-template-columns:1fr;gap:1rem;align-items:start}

/* Carousel */
.carousel{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:.9rem;overflow:hidden}
.carousel-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:.6rem}
.carousel-title{flex: 1; text-align: center;}
.planogram-title-text{font-weight: 700;font-size: 1rem; margin-bottom: .15rem;}
.planogram-counter-text{font-size: .85rem; color: var(--muted);}
.nav-btn{
  width:28px;height:28px;border-radius:8px;border:1px solid #ddd;background:#fff;cursor:pointer;font-weight:700
}
.pg-name{font-weight:700}
.pg-counter{font-size:.85rem;color:var(--muted)}

@media (max-width: 768px){
  .btn, .print-btn{ padding: .5rem .9rem; } /* a bit taller tap target */
  .nav-btn{ width: 36px; height: 36px; }     /* easier to tap the carousel arrows */
}


/* Slide */
.slide{display:grid;gap:1rem}
.pg-block{border-top:1px dashed var(--line);padding-top:.6rem;overflow:hidden}
.pg-type{font-weight:700;font-size:.95rem;color:var(--muted);margin-bottom:.25rem}
.pg-row{margin:.25rem 0 .9rem}
.row-label{text-align:center;font-weight:800;margin-bottom:.25rem}
.row{
  display:flex;justify-content:center;align-items:flex-end;gap:.55rem;flex-wrap:wrap;
}

/* item tiles */
.sku{display:flex;flex-direction:column;align-items:center;gap:.2rem;min-width:64px}
.sku img{
  width:56px;height:56px;object-fit:contain;border-radius:12px;border:1px solid #eee;background:#fafafa;padding:.3rem
}
.sku-code{font-size:.78rem;font-weight:700}
.qty{font-size:.72rem;color:var(--muted)}

.old-code{
  font-size:.72rem;
  color: var(--muted);
  line-height:1.05;
  min-height:1em;     /* stabilise tile height across rows */
  text-align:center;
  margin-top: 0;      /* match your tight stack */
}
.old-code.placeholder{
  visibility: hidden; /* "nothing there" but alignment preserved */
}

/* Auto-fit support: we transform rows and reserve height */
.pg-row .row{transform-origin: top center;will-change: transform, height}


/* Footer */
.foot{
  padding: 1.5rem 1rem;
  text-align: center;
  color: #888;
  background: transparent;
  border-top: 0;
  font-size: 11px;
  margin-top: auto;
}
.foot-copy{
  margin: 0 0 .5rem;
  line-height: 1.4;
}
.foot-links{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;                 /* space between links */
  flex-wrap: wrap;           /* wrap neatly on small screens */
}
.foot-links a{
  color: inherit;            /* same subtle tone as footer */
  text-decoration: none;
  border-bottom: 1px dotted #bbb;   /* gentle underline */
}
.foot-links a:hover{
  border-bottom-style: solid;
}

/* Tablet */
@media (max-width: 1024px){
  .foot{ font-size: 13px; padding: 1.25rem .9rem; }
  .foot-links{ gap: .8rem; }
}

/* Mobile */
@media (max-width: 768px){
  .foot{ font-size: 10px; padding: 1.1rem .75rem; }
  .foot-links{ gap: .6rem; }
}

/* (You already hide footer on print; keep as-is if desired)
@media print{ .foot{ display:none !important; } }
*/

.foot-help{
  margin: 0 0 1rem;
  font-size: 12px;
  line-height: 1.4;
  color: #555;
}
.foot-help a{
  color: inherit;
  text-decoration: underline;
}
.foot-help a:hover{
  text-decoration: none;
}

/* Scale down nicely on tablets/phones */
@media (max-width: 1024px){
  .foot-help{ font-size: 13px; }
}
@media (max-width: 768px){
  .foot-help{ font-size: 12px; }
}



/* Print */
@media print{
  .appbar,.chips,.nav-btn,.foot{display:none !important}
  .viewer{grid-template-columns:1fr}
  .lookup{display:none}
  body{background:#fff}
}

/* ---------------- Responsive tweaks ---------------- */

/* Tablets (≤ 1024px) */
@media (max-width: 1024px){
  .appbar{ padding: .5rem .75rem; }
  .logo{ height: 36px; }
  .title{ font-size: 16px; }
  .print-btn{ padding: .4rem .8rem; font-size: .9rem; }

  .lookup{ grid-template-columns: repeat(2, 1fr); }

  /* single line per row on tablets; uniform scale handled in JS */
  #slide .pg-row .row{ flex-wrap: nowrap; justify-content: flex-start; } /* FIXED */

  .sku img{ width: 52px; height: 52px; }
}

/* Mobiles (≤ 768px) */
@media (max-width: 768px){
  body { font-size: 13px; }

  .appbar{ padding: .45rem .6rem; }
  .logo{ height: 28px; }
  .title{ font-size: 15px; }
  .print-btn{ padding: .35rem .7rem; font-size: .85rem; }

  .lookup{ grid-template-columns: 1fr; }

  /* single line per row on phones; uniform scale handled in JS */
  #slide .pg-row .row{ flex-wrap: nowrap; justify-content: flex-start; } /* FIXED */

  .sku{ min-width: 60px; }
  .sku img{ width: 48px; height: 48px; }
  .sku-code{ font-size: .72rem; }
  .qty{ font-size: .7rem; }
}


/* Partner prompt (subtle floating pill) */
.partner-prompt{
  position: fixed;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: .6rem;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: .55rem .75rem .55rem .6rem;
  box-shadow: 0 6px 18px rgba(0,0,0,.06);
  z-index: 20;
  max-width: min(92vw, 720px);
  font-size: .9rem;
}
.partner-prompt.hidden{ display: none !important; }
.partner-prompt .pp-text{ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.partner-prompt .pp-btn{
  border: 1px solid var(--brand);
  color: #fff;
  background: var(--brand);
  padding: .4rem .7rem;
  border-radius: 999px;
  font-weight: 700;
  text-decoration: none;
  flex: 0 0 auto;
}
.partner-prompt .pp-btn:hover{ filter: brightness(.98); }
.partner-prompt .pp-close{
  border: 1px solid #e6e6e6;
  background: #fff;
  width: 24px; height: 24px; line-height: 22px;
  border-radius: 999px;
  text-align: center;
  font-weight: 700;
  cursor: pointer;
  flex: 0 0 auto;
}
@media (max-width: 480px){
  .partner-prompt{ font-size: .85rem; padding: .5rem .6rem; }
  .partner-prompt .pp-text{ max-width: 58vw; }
}

@media (max-width: 768px){
  .partner-prompt{ bottom: max(18px, env(safe-area-inset-bottom)); }
  .carousel{ padding-bottom: 80px; } /* gives space above the pill when visible */
}

/* Don’t show in print */
@media print{ .partner-prompt{ display:none !important; } }


/* --- Fix Safari/iOS shrink issue when bays are very wide --- */
html, body { 
  overflow-x: visible; 
}

.carousel, .slide { 
  max-width: 100%; 
}


.sku { 
  flex: 0 0 auto;     /* tiles keep natural size */
}

@supports (-webkit-touch-callout: none){
  .pg-row .row { 
    contain: layout paint; 
  }
}

/* Rows must be single-line for correct width measurement */
.pg-row .row{
  flex-wrap: nowrap;            /* <— important: never wrap */
  justify-content: flex-start;  /* JS will center after scaling */
  padding-inline: 4px;
  overflow: visible;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

/* (Optional safety if JS toggles a class while measuring) */

.row.fit-measuring{
  flex-wrap: nowrap !important;
  width: max-content !important;
  display: inline-flex !important; /* lets the row shrink to its content while measuring */
}


/* Inner inline-flex that we measure/transform */
.row-inner{
  display: inline-flex;
  gap: .55rem;                 /* same as .row gap */
  flex-wrap: nowrap;
  transform-origin: top left;
}

/* Allow intrinsic shrink during measuring */
.row-inner.fit-measuring{
  width: max-content !important;
}

/* Scroll mode (only applied on very wide rows) */
.row.scrollable{
  overflow-x: auto;            /* enable horizontal scroll on mobile */
  -webkit-overflow-scrolling: touch;  /* momentum scroll on iOS */
}

/* Optional: cleaner mobile look; remove if you want visible scrollbar */
.row.scrollable::-webkit-scrollbar{ height: 0 }


/* Canvas holds all rows; becomes wide in scroll-mode */
.pg-block{ text-align: center;}
.pg-canvas{ display: inline-block; }

/* When the planogram is too wide, scroll the *whole block* */
.pg-block.scroll-mode{
  overflow-x: auto;                   /* horizontal scroll on the card */
  -webkit-overflow-scrolling: touch;  /* momentum on iOS */
  text-align: center;
}
.pg-block.scroll-mode .pg-canvas{
  display: inline-block;
  width: max-content;                 /* canvas as wide as needed */
}

/* Rows never scroll individually anymore */
.row.scrollable{ overflow: visible !important; }

/* A desktop-like width used just before opening the print dialog */
:root.print-preview .carousel,
.print-preview .carousel{
  max-width: 980px;   /* tune if you want slightly larger/smaller */
  margin: 0 auto;
}
.print-preview .pg-block{
  overflow: visible !important;  /* avoid clipping rounded corners */
  text-align: center;
}
.print-preview .pg-canvas{
  display: inline-block;
  width: 100% !important;        /* measured as full “desktop” width */
}

/* Real print: A4 portrait with comfortable margins */
@page{
  size: A4 portrait;
  margin: 12mm;
}
@media print{
  /* Hide UI chrome */
  .appbar, .lookup, .chips, .carousel-header, .partner-prompt,
  .foot, .foot-links { display: none !important; }

  /* Center the planogram and avoid any clipping */
  .carousel{ max-width: 980px; margin: 0 auto; }
  .pg-block{ overflow: visible !important; text-align: center; }
  .pg-canvas{ display: inline-block; width: 100% !important; }
}

/* ===== Support modal ===== */
.support-modal{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;
  background:rgba(0,0,0,.35);z-index:100}
.support-modal.hidden{display:none !important}
.support-card{background:#fff;border:1px solid var(--line);border-radius:16px;
  width:min(92vw,560px);padding:1rem}
.support-card h3{margin:.25rem 0 1rem;font-size:1.1rem}
.support-card .field{margin-bottom:.7rem}
.support-card input,.support-card textarea{
  width:100%;padding:.45rem .6rem;border-radius:.6rem;border:1px solid #ddd;background:#fff;font:inherit
}
.support-card .actions{display:flex;gap:.6rem;justify-content:flex-end;margin-top:.5rem}

/* Mobile tweaks */
@media (max-width:768px){
  .support-card{ width:min(96vw,520px); padding:.85rem }
  .support-card h3{ font-size:1rem }
  .support-card input,.support-card textarea{ font-size:16px } /* iOS zoom fix */
}

/* ===== Planogram loading overlay ===== */
.loading-overlay {
  position: fixed;
  inset: 0;
  background: rgba(255,255,255,0.85);
  display: none;                /* toggled by JS */
  align-items: center;
  justify-content: center;
  z-index: 9999;
  backdrop-filter: blur(2px);
}

.loading-overlay.show { display: flex; }

.loader-card {
  background: #fff;
  border: 1px solid #eee;
  border-radius: 16px;
  padding: 20px 24px;
  box-shadow: 0 8px 30px rgba(0,0,0,0.08);
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 280px;
}

.spinner {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 3px solid #f3f3f3;
  border-top-color: #f26522;    /* GadJet orange */
  animation: spin 0.9s linear infinite;
}

.loader-text {
  font-size: 14px;
  color: #444;
}

@keyframes spin { to { transform: rotate(360deg); } }

/* Optional: disabled button look while loading */
button[disabled] {
  opacity: 0.6;
  cursor: not-allowed !important;
}

/* Prevent background scroll while overlay is open (mobile-friendly) */
.body-no-scroll { overflow: hidden; }

/* Ensure overlay uses safe area on iOS notches */
.loading-overlay { 
  padding: env(safe-area-inset-top) env(safe-area-inset-right)
           env(safe-area-inset-bottom) env(safe-area-inset-left);
}

/* Slightly smaller card & spinner on small screens */
@media (max-width: 480px) {
  .loader-card { 
    padding: 16px 18px; 
    border-radius: 14px; 
    min-width: 240px; 
    gap: 10px;
  }
  .spinner { width: 22px; height: 22px; border-width: 3px; }
  .loader-text { font-size: 13px; }
}

/* Motion accessibility: stop spinner for users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  .spinner { animation: none; border-top-color: #bbb; }
}

/* Header above the rows: actions (print) stacked above the type label */
.pg-head{
  text-align: center;           /* centers children when they are inline-block */
  margin: 0 0 .4rem 0;
}

/* the actions row (holds the print pill) */
.pg-actions{
  display: block;        /* pair with .pg-head centering */
  margin-bottom: 6px;
}

/* the type row (Bays/CDU/FSDU) */
.pg-type{
  display: block;        /* JS switches to inline-block in scroll mode to match width */
}
.pg-type-label{
  font-weight: 700;
  font-size: .95rem;
  color: var(--muted);
}

/* on-brand print pill */
.inline-print-btn{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 32px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1.5px solid var(--brand);     /* #f26522 */
  background: #fff;
  color: var(--brand);
  font-weight: 700;
  font-size: 12px;
  line-height: 1;
  box-shadow: 0 6px 18px rgba(0,0,0,.08);
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease, color .15s ease, border-color .15s ease;
}
.inline-print-btn:hover{
  background: color-mix(in srgb, var(--brand) 10%, #fff);
  box-shadow: 0 10px 26px rgba(0,0,0,.12);
  transform: translateY(-1px);
}
.inline-print-btn .btn-icon{ width: 18px; height: 18px; display:block; }

/* Mobile: keep it tidy (icon-only) */
@media (max-width: 720px){
  .inline-print-btn{ padding: 0 10px; height: 30px; gap: 6px; }
  .inline-print-btn .btn-text{ display: none; }
}

/* Don’t show controls in the PDF */
@media print{
  .inline-print-btn{ display: none !important; }
}

/* ===== Print header: hidden on screen, shown in print/preview ===== */
.print-header { display: none; }

/* Show in our print preview mode (your JS adds .print-preview on <html>) */
:root.print-preview .print-header {
  display: block;
  position: static;
  margin: 0 0 12mm 0; /* space below the header */
  background: #fff;
  border-bottom: 1px solid #eee;
  padding: 8mm 0 4mm 0;
  z-index: 999;
}

/* Show in real print too */
@media print {
  .print-header {
    display: block;
    position: static;
    margin: 0 0 12mm 0;
    background: #fff;
    border-bottom: 1px solid #eee;
    padding: 8mm 0 4mm 0;
  }
}


.print-header .ph-center {
  display: flex;
  flex-direction: column;   /* stack logo above text */
  align-items: center;
  justify-content: center;
  gap: 4px;                 /* space between logo and “Planogram” */
  margin-bottom: 10px;
}

.print-header .ph-title {
  font-weight: 700;
  font-size: 22px;
  color: var(--brand);
}


.print-header .ph-meta {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px 18px;
  font-size: 12px;
  color: #333;
}

@media print {
  body > *:not(#printWrapper) {
    display: none !important;
  }

  #printWrapper {
    display: block !important;
    width: 210mm !important;
    margin: 0 auto !important;
    padding: 0 !important;  /* removes top offset */
    background: #fff !important;
  }

  #printWrapper #printHeader {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  #printWrapper .pg-block,
  #printWrapper .pg-canvas,
  #printWrapper .pg-row,
  #printWrapper .row-inner {
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
    justify-content: center !important;
  }

  /* Prevent any page break before planogram */
  #printWrapper {
    page-break-before: avoid !important;
  }
}