body {
   max-width: 100vw;
   font-family: Arial, sans-serif;
   margin: 20px;
   background: #111827;
   color: #e5e7eb;
   overflow-x: auto;
 }

 .container {
   width: min(1120px, calc(100vw - 40px));
   margin: 0 auto;
 }

 .scroll-container {
   overflow-x: auto;
   overflow-y: hidden;
   width: 100%;
   max-width: 100%;

   scroll-behavior: smooth;
   /* Optional: nicer scrollbar on desktop */
   scrollbar-width: thin;
 }

 /* Make sure the table doesn't shrink */
 .scroll-container table {
   width: auto !important;
   /* let it be as wide as its content needs */
   min-width: 100%;
   /* at least full width */
   table-layout: fixed;
   /* or auto — try both */
   border-collapse: collapse;
 }


 .dropzone {
   border: 3px dashed #4b5563;
   border-radius: 12px;
   padding: 40px 20px;
   text-align: center;
   cursor: pointer;
   transition: all 0.3s;
   width: 50%;
 }

 .dropzone.highlight {
   border-color: #10b981;
   background: #1f2937;
 }

 .preview {
   margin-top: 20px;
   text-align: center;
 }

 .preview img {
   max-width: 100%;
   border-radius: 8px;
 }

 .hidden {
   display: none;
 }

 button {
   margin: 10px 5px;
   padding: 12px 24px;
   font-size: 16px;
   border: none;
   border-radius: 8px;
   cursor: pointer;
 }

 button.set {
   background: #10b981;
   color: white;
 }

 .btn-edit {
   margin: 5px;
   padding: 12px;
   font-size: 12px;
   border: none;
   border-radius: 8px;
   cursor: pointer;
 }

 .btn-primary {
   background: #409a9c;
   color: white;
   margin-top: 30px;
   font-size: 20px;
   border: none;
   width: 90%;
 }


 .btn-secondary {
   background: #374f50;
   color: white;
   border: 1px solid #409a9c;
 }




 .btn-action {
   /* Remove browser default styles */
   background: transparent;
   border: 1px solid white;
   border-radius: 30%;
   padding: 0;
   cursor: pointer;
   outline: none;

   /* Proper alignment */
   display: inline-flex;
   align-items: center;
   justify-content: center;
 }

 .btn-action img {
   width: 30px;
   /* Set your desired size */
   height: 30px;
   display: block;
   background: transparent;
 }






 #status {
   margin-top: 15px;
   font-weight: bold;
 }

 .template {
   display: none;
 }

 .grocktext {
   margin-top: 20px;

 }

 .prompt-layout {
   display: grid;
   grid-template-columns: minmax(0, 1fr) 338px;
   gap: 16px;
   align-items: start;
 }

 .prompt-layout textarea {
   width: 80%;
   min-height: 120px;
   padding: 12px;
   border: 1px solid #374151;
   border-radius: 10px;
   background: #0f172a;
   color: #e5e7eb;
   resize: vertical;
   box-sizing: border-box;
 }


 .barcode-button {
   cursor: pointer;
 }



 .retrieve-panel {
   width: 70%;
   padding: 14px;
   border: 1px solid #374151;
   border-radius: 12px;
   background: #1f2937;
 }

 .retrieve-panel h3 {
   margin: 0 0 10px;
   font-size: 16px;
   color: #f9fafb;
 }

 .retrieve-panel select {
   width: 100%;
   padding: 12px;
   border: 1px solid #4b5563;
   border-radius: 10px;
   background: #111827;
   color: #e5e7eb;
   font-size: 14px;
 }

 .retrieve-actions {
   display: flex;
   justify-content: flex-end;
   margin-top: 10px;
 }

 .retrieve-actions button:disabled {
   opacity: 0.5;
   cursor: not-allowed;
 }




 .shopping-list-html {
   margin-top: 20px;
   padding: 16px;
   border-radius: 12px;
   background: #1f2937;
   border: 1px solid white;
   overflow-x: auto;
 }

 /* Table styling */
 .shopping-list-html table {
   width: 100%;
   border-collapse: collapse;
   /* Important: merges borders */
   color: white;
   /* text color */
 }

 .shopping-list-html th,
 .shopping-list-html td {
   border: 1px solid white;
   /* This is what you were missing */
   padding: 10px 12px;
   text-align: left;
 }

 /* Optional: make header row stand out */
 .shopping-list-html th {
   background: #374151;
   font-weight: bold;
 }




 .scan-quality {
   display: none;
   margin-top: 20px;
   padding: 14px 16px;
   border-radius: 12px;
   background: linear-gradient(135deg, #0f172a, #1f2937);
   border: 1px solid #374151;
 }

 .scan-quality.visible {
   display: block;
 }

 .scan-quality strong {
   color: #f9fafb;
 }

 .scan-quality.good {
   border-color: #10b981;
 }

 .scan-quality.warn {
   border-color: #f59e0b;
 }

 .scan-quality.poor {
   border-color: #ef4444;
 }





 .btn-danger {
   background: #b91c1c;
   color: white;
 }

 @media (max-width: 768px) {
   body {
     margin: 12px;
   }

   .container {
     width: calc(100vw - 24px);
   }

   .prompt-layout {
     grid-template-columns: 1fr;
   }

   .receipt-html {
     padding: 12px;
   }


 


 }

 /* Step 1: inline barcode scanner frame (above Scan button) */
 .barcode-scan-panel {
   width: 90%;
   margin: 16px auto 0;
   padding: 12px;
   border: 2px solid #409a9c;
   border-radius: 12px;
   background: #0f172a;
   box-sizing: border-box;
   text-align: center;
 }

 .barcode-scan-panel.hidden {
   display: none !important;
 }

 .barcode-scan-video {
   display: block;
   width: 100%;
   height: 220px;
   max-height: 40vh;
   object-fit: cover;
   border-radius: 8px;
   background: #000;
 }

 .barcode-scan-status {
   margin: 10px 0 6px;
   color: #e5e7eb;
   font-size: 1rem;
   min-height: 1.4em;
   word-break: break-word;
 }