/* style.css */

.hidden {
  display: none;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background-color: #f4f6f8;
  color: #333;
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

.container {
  background: white;
  padding: 2rem 3rem;
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.08);
  width: 100%;
  max-width: 500px;
  text-align: center;
}

h1 {
  font-size: 1.8rem;
  margin-bottom: 2rem;
  color: #1a73e8;
}

#upload-controls {
  margin-bottom: 1.5rem;
}

button {
  background-color: #1a73e8;
  color: white;
  border: none;
  padding: 12px 20px;
  font-size: 1rem;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.2s;
  margin: 0.5rem;
}

button:hover:not(:disabled) {
  background-color: #1765cc;
}

button:disabled {
  background-color: #a0c3ff;
  cursor: not-allowed;
}

#camera-preview {
  border-radius: 4px;
}

.camera-buttons {
  margin: 1rem 0;
}

#thumbs-container {
  margin-top: 1rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
}

#thumbs-container img {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border: 1px solid #ccc;
  border-radius: 4px;
}

#status-message {
  margin-top: 1rem;
  font-weight: 500;
}

/* ===== Additional rules for inventory.html ===== */

/* Ensure body background and container fonts match */
body {
  background-color: #f4f6f8;
}
.inventory-container {
  background: white;
  padding: 1rem 2rem;
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  margin-bottom: 2rem;
}
table.inventory-table th,
table.inventory-table td {
  word-wrap: break-word;
}

/* --- existing rules above this point --- */

/* Make the container center at 80% width on large screens */
@media (min-width: 800px) {
  .container {
    width: 80vw;
  }
}

/* Ensure 100% width on smaller/mobile */
@media (max-width: 799px) {
  .container {
    width: 100%;
  }
}

/* - The preview modal styles (in case you didn’t inline them) - */
#preview-modal {
  display: none;
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background-color: rgba(0,0,0,0.6);
  justify-content: center;
  align-items: center;
  z-index: 100;
}
#preview-modal img {
  max-width: 90%;
  max-height: 90%;
  border: 4px solid white;
  border-radius: 8px;
}

#camera-preview {
  outline: none;
  transition: outline 1.75s ease-out;
}

#camera-preview.snapshot-feedback {
  outline: 10rem ridge #e21919;
  border-radius: 2rem;
}
/* --- Fix mobile card alignment (put this at the very end) --- */

/* Stop global center alignment from style.css */
.container { text-align: left; }

/* Keep the page title centered if you like */
.page-title { text-align: center; }

/* Mobile: align labels/values to the left and keep them under their headings */
@media (max-width: 720px) {
  .card, .card .body, .card h3, .meta,
  .kv, .kv-row, .kv-label, .kv-val {
    text-align: left !important;
  }

  /* Ensure the label:value grid behaves like "Heading: Value" and wraps neatly */
  .kv {
    display: grid !important;
    grid-template-columns: max-content minmax(0, 1fr) !important;
    column-gap: .35rem !important;
    row-gap: .35rem !important;
  }
  .kv-row { display: contents !important; }
  .kv-label { white-space: nowrap; justify-self: start; }
  .kv-label::after { content: ":"; margin-left: .2rem; }
  .kv-val { justify-self: start; overflow-wrap: anywhere; word-break: break-word; }

  /* Make sure the top-right action column stays hidden on phones */
  .card .actions { display: none !important; }

  /* …and the bottom footer (with the red X) is visible */
  .card-footer { display: flex !important; }
}
/* Small grid, newest at far left, wraps naturally */
#thumbs-container{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  justify-content:flex-start;   /* not centered */
  align-items:flex-start;
  margin-top:8px;
}

/* Keep each thumb tiny */
.thumb{
  width:64px;            /* match your old small size (use 80px if you prefer) */
  height:64px;
  border-radius:6px;
  overflow:hidden;
  box-shadow:0 1px 4px rgba(0,0,0,.12);
  animation:thumbPop .14s ease-out;
}
.thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* entrance + fade-away */
@keyframes thumbPop{
  from{ transform:scale(.96); opacity:.6; }
  to{   transform:scale(1);   opacity:1; }
}
.thumb.fade{
  opacity:0;
  transform:scale(.98);
  transition:opacity .5s ease, transform .5s ease;
}

@media (prefers-reduced-motion: reduce){
  .thumb{ animation:none; }
  .thumb.fade{ transition:none; }
}
/* === THUMB GRID — FINAL OVERRIDES === */

/* Container: newest at far-left, wrap, not centered */
#thumbs-container {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 4px !important;
  justify-content: flex-start !important;
  align-items: flex-start !important;
  margin-top: 8px !important;
}

/* Each thumb wrapper (small square) */
#thumbs-container .thumb {
  width: 64px !important;
  height: 64px !important;
  border-radius: 6px !important;
  overflow: hidden !important;
  box-shadow: 0 1px 4px rgba(0,0,0,.12) !important;
  animation: thumbPop .14s ease-out;
  position: relative;
}

/* Image should always fill the wrapper */
#thumbs-container .thumb > img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

/* Entrance + fade-away */
@keyframes thumbPop {
  from { transform: scale(.96); opacity: .6; }
  to   { transform: scale(1);   opacity: 1; }
}
#thumbs-container .thumb.fade {
  opacity: 0 !important;
  transform: scale(.98) !important;
  transition: opacity .5s ease, transform .5s ease !important;
}

@media (prefers-reduced-motion: reduce) {
  #thumbs-container .thumb { animation: none !important; }
  #thumbs-container .thumb.fade { transition: none !important; }
}

/* Important: neutralize any earlier rule that sized raw imgs directly */
#thumbs-container > img {
  width: auto !important;
  height: auto !important;
  border: 0 !important;
  border-radius: 0 !important;
}
/* Floating camera icon buttons */
.cam-icon-btn {
  position: absolute;
  z-index: 3; /* above overlay + equal/above snap FAB */
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: none;
  background: rgba(11,18,32,0.72);
  color: #fff;
  font-weight: 700;
  font-size: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 20px rgba(0,0,0,.25);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  cursor: pointer;
  transition: transform .06s ease, opacity .18s ease, background .18s ease;
  user-select: none;
  touch-action: manipulation;
}
.cam-icon-btn:hover { background: rgba(11,18,32,0.84); }
.cam-icon-btn:active { transform: translateY(1px); }

/* Positions relative to #camera-frame */
#lens-btn  { top: 12px; right: 12px; }
#torch-btn { bottom: 12px; left: 12px; }
#zoom-btn  { bottom: 12px; right: 80px; } /* sits left of the Snap FAB */

@media (max-width: 480px) {
  #zoom-btn { right: 72px; }
}

/* Zoom popover */
#zoom-popover {
  position: absolute;
  bottom: 68px;  /* above the FAB/buttons */
  right: 12px;
  z-index: 3;
  background: rgba(255,255,255,0.96);
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 12px;
  padding: 6px 10px;
  box-shadow: 0 12px 28px rgba(0,0,0,.22);
}
#zoom-popover input[type="range"] {
  width: 160px;
  accent-color: #1a73e8;
}
/* Compact layout when camera is open */
body.camera-active .container {
  padding-top: 0.75rem;      /* was 2rem+ */
}

body.camera-active h1 {
  margin-bottom: 0.5rem;     /* was ~2rem */
  font-size: clamp(1.2rem, 4.5vw, 1.5rem);
}

/* Hide non-essential rows while shooting */
body.camera-active #upload-controls { display: none !important; }
body.camera-active #app-container > div:first-child { display: none !important; } /* welcome row */

/* Tighten the video spacing on mobile */
@media (max-width: 600px) {
  .container { padding: 1rem 1rem; }
  h1 { margin-bottom: 0.9rem; }
  #camera-preview { margin-top: 0.5rem !important; } /* was 1rem */
}

/* If the inline camera tooltip is shown, keep it tight */
body.camera-active #camera-tooltip {
  margin-top: 0.25rem !important;
}