/* ============================================
   Barcode Generator — App Styles
   Extends pibico.css — tabbed workspace
   ============================================ */

/* --- Body background --- */
body {
  background: linear-gradient(135deg, #2c5171 0%, #4682b4 50%, #6a9bc3 100%);
  min-height: 100vh;
}

/* --- Navbar (floating frosted glass) --- */
.navbar {
  position: fixed;
  top: 8px;
  left: 12px;
  right: 12px;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.6rem 1.5rem;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  background: rgba(255, 255, 255, 0.85);
  border-radius: var(--pibico-radius);
  box-shadow: var(--pibico-card-shadow);
}

.navbar-title {
  font-family: var(--pibico-font-heading);
  font-size: 1.15rem;
  font-weight: 700;
  background: linear-gradient(135deg, #4682B4 0%, #365F8A 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.navbar-nav {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  list-style: none;
}

.nav-link {
  font-family: var(--pibico-font-button);
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--pibico-steel-blue);
  padding: 0.35rem 0.75rem;
  border-radius: var(--pibico-radius-sm);
  transition: all 0.2s ease;
}

.nav-link:hover {
  background: var(--pibico-steel-pale);
  color: var(--pibico-steel-dark);
}

/* --- Icon button (navbar cog) --- */
.btn-icon {
  width: 34px;
  height: 34px;
  border: none;
  border-radius: var(--pibico-radius-sm);
  background: var(--pibico-light-grey);
  color: var(--pibico-steel-blue);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.btn-icon:hover {
  background: var(--pibico-steel-pale);
  color: var(--pibico-steel-dark);
}

/* --- Footer (floating frosted glass) --- */
.app-footer {
  position: fixed;
  bottom: 8px;
  left: 12px;
  right: 12px;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.4rem 1.5rem;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  background: rgba(255, 255, 255, 0.85);
  border-radius: var(--pibico-radius);
  box-shadow: var(--pibico-card-shadow);
  font-family: var(--pibico-font-body);
  font-size: 0.75rem;
  color: var(--pibico-grey-dark);
}

.app-footer a {
  color: var(--pibico-steel-blue);
  font-weight: 500;
}

.footer-separator {
  color: var(--pibico-grey-mid);
  margin: 0 0.15rem;
}

/* --- Main content --- */
.app-main {
  margin-top: 64px;
  margin-bottom: 48px;
  padding: 1.25rem 12px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

/* --- Status bar --- */
.status-bar {
  padding: 0.5rem 1rem;
  border-radius: var(--pibico-radius-sm);
  font-size: 0.82rem;
  margin-bottom: 1rem;
  display: none;
  width: 100%;
}

.status-bar.show { display: block; }
.status-bar.success { background: #ecfdf5; color: #065f46; }
.status-bar.error { background: var(--pibico-brick-pale); color: var(--pibico-brick-dark); }

/* =============================================
   MAIN TABS (Generate / Lookup)
   ============================================= */
.main-tabs {
  display: flex;
  gap: 0.25rem;
  margin-bottom: 1.25rem;
  background: rgba(255, 255, 255, 0.2);
  border-radius: var(--pibico-radius);
  padding: 4px;
  width: fit-content;
}

.main-tab {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 1.25rem;
  border: none;
  border-radius: var(--pibico-radius-sm);
  background: transparent;
  cursor: pointer;
  font-family: var(--pibico-font-heading);
  font-size: 0.85rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.7);
  transition: all 0.2s ease;
}

.main-tab:hover {
  color: rgba(255, 255, 255, 0.9);
  background: rgba(255, 255, 255, 0.1);
}

.main-tab.active {
  background: rgba(255, 255, 255, 0.9);
  color: var(--pibico-steel-dark);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* --- Tab content --- */
.tab-content {
  display: none;
}

.tab-content.active {
  display: block;
}

/* =============================================
   GENERATE TAB — Two-Column Grid
   ============================================= */
.gen-layout {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 1.25rem;
  width: 100%;
  align-items: stretch;
}

/* --- Form Card --- */
.form-card {
  padding: 1.5rem !important;
  display: flex;
  flex-direction: column;
}

.card-section-title {
  font-family: var(--pibico-font-heading);
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--pibico-grey-dark);
  margin-bottom: 0.6rem;
}

/* --- Form groups --- */
.form-group {
  margin-bottom: 0.85rem;
}

.form-group label {
  display: block;
  font-family: var(--pibico-font-heading);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--pibico-near-black);
  margin-bottom: 0.25rem;
}

.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 0.5rem 0.7rem;
  border: 1.5px solid transparent;
  border-radius: var(--pibico-radius-sm);
  background: var(--pibico-light-grey);
  font-family: var(--pibico-font-body);
  font-size: 0.88rem;
  color: var(--pibico-near-black);
  outline: none;
  transition: box-shadow 0.2s, background 0.2s, border-color 0.2s;
}

.form-group input:focus,
.form-group select:focus {
  border-color: var(--pibico-steel-blue);
  box-shadow: 0 0 0 3px rgba(70, 130, 180, 0.12);
  background: var(--pibico-white);
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}

/* --- Format Toggle --- */
.format-toggle {
  display: flex;
  gap: 0.25rem;
  margin-bottom: 1rem;
  background: var(--pibico-light-grey);
  border-radius: var(--pibico-radius-sm);
  padding: 3px;
  width: fit-content;
}

.fmt-btn {
  padding: 0.4rem 1.25rem;
  border: none;
  border-radius: calc(var(--pibico-radius-sm) - 2px);
  background: transparent;
  cursor: pointer;
  font-family: var(--pibico-font-button);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--pibico-grey-dark);
  transition: all 0.2s ease;
}

.fmt-btn.active {
  background: var(--pibico-white);
  color: var(--pibico-steel-blue);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}

/* --- Color input pair (picker + hex text) --- */
.color-input-wrap {
  display: flex;
  gap: 6px;
  align-items: center;
}

.color-input-wrap input[type="color"] {
  width: 36px;
  height: 36px;
  border: 1.5px solid var(--pibico-light-grey);
  border-radius: var(--pibico-radius-sm);
  padding: 2px;
  cursor: pointer;
  background: none;
}

.color-hex {
  width: 80px !important;
  font-family: monospace;
  font-size: 0.82rem !important;
  text-transform: uppercase;
}

/* --- Checkbox label in options --- */
.opt-checkbox-label {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  font-size: 0.85rem !important;
  font-weight: 500 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  padding-top: 10px;
}

.opt-checkbox-label input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--pibico-steel-blue);
  cursor: pointer;
}

/* --- Design toggle (collapsible) --- */
.design-toggle {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  font-family: var(--pibico-font-heading);
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--pibico-steel-blue);
  background: none;
  border: none;
  padding: 0.35rem 0;
  margin-bottom: 0.5rem;
}

.design-toggle svg {
  transition: transform 0.2s;
}

.design-toggle.open svg {
  transform: rotate(180deg);
}

.collapsible-section {
  display: none;
  margin-bottom: 0.75rem;
  padding-left: 4px;
}

/* --- Form Actions --- */
.form-actions {
  display: flex;
  gap: 0.5rem;
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--pibico-light-grey);
}

.btn-generate {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.7rem 1.25rem;
  border: none;
  border-radius: var(--pibico-radius-sm);
  font-family: var(--pibico-font-button);
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  background: linear-gradient(135deg, #B33A2B 0%, #D4604F 100%);
  color: var(--pibico-white);
  box-shadow: 0 3px 12px rgba(179, 58, 43, 0.3);
  transition: all 0.2s ease;
}

.btn-generate:hover {
  background: linear-gradient(135deg, #8A2A1F 0%, #B33A2B 100%);
  transform: translateY(-1px);
  box-shadow: 0 5px 16px rgba(179, 58, 43, 0.35);
}

.btn-generate:active { transform: translateY(0); }
.btn-generate:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }

.btn-clear {
  padding: 0.7rem 1rem;
  border: none;
  border-radius: var(--pibico-radius-sm);
  font-family: var(--pibico-font-button);
  font-size: 0.82rem;
  font-weight: 500;
  cursor: pointer;
  background: var(--pibico-light-grey);
  color: var(--pibico-grey-dark);
  transition: all 0.2s ease;
}

.btn-clear:hover {
  background: var(--pibico-steel-pale);
  color: var(--pibico-steel-dark);
}

/* =============================================
   PREVIEW COLUMN
   ============================================= */
.preview-column {
  display: flex;
  flex-direction: column;
}

.preview-card {
  padding: 0 !important;
  overflow: hidden;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.preview-area {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 280px;
  padding: 2rem;
  background-color: #f8f9fb;
  background-image: radial-gradient(circle at 1px 1px, rgba(70, 130, 180, 0.05) 1px, transparent 0);
  background-size: 20px 20px;
}

.preview-placeholder {
  text-align: center;
  color: var(--pibico-grey-mid);
}

.preview-placeholder svg {
  opacity: 0.3;
  margin-bottom: 0.75rem;
}

.preview-placeholder p {
  font-size: 0.85rem;
  font-weight: 400;
}

#barcode-preview {
  max-width: 400px;
  width: 100%;
  border-radius: var(--pibico-radius-sm);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  animation: bc-appear 0.4s ease-out;
}

@keyframes bc-appear {
  0% { opacity: 0; transform: scale(0.85); }
  70% { transform: scale(1.02); }
  100% { opacity: 1; transform: scale(1); }
}

/* --- Preview Actions --- */
.preview-actions {
  display: flex;
  gap: 0.5rem;
  padding: 0.85rem 1.25rem;
  background: var(--pibico-white);
  border-top: 1px solid var(--pibico-light-grey);
}

.btn-dl {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  padding: 0.5rem 0.75rem;
  border: none;
  border-radius: var(--pibico-radius-sm);
  font-family: var(--pibico-font-button);
  font-size: 0.8rem;
  font-weight: 500;
  cursor: pointer;
  background: var(--pibico-light-grey);
  color: var(--pibico-grey-dark);
  transition: all 0.2s ease;
}

.btn-dl:hover {
  background: var(--pibico-steel-pale);
  color: var(--pibico-steel-dark);
}

.btn-dl-accent {
  background: var(--pibico-steel-blue);
  color: var(--pibico-white);
}

.btn-dl-accent:hover {
  background: var(--pibico-steel-dark);
  color: var(--pibico-white);
}

/* =============================================
   RESULTS COLUMN (Lookup + Scan right panel)
   ============================================= */
.results-column {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.scan-placeholder-card {
  padding: 2rem !important;
  text-align: center;
}

.lookup-desc {
  font-size: 0.85rem;
  color: var(--pibico-grey-dark);
  margin-bottom: 1rem;
}

/* --- Product Card --- */
.product-card {
  padding: 1.5rem !important;
}

.product-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--pibico-light-grey);
}

.product-code {
  font-family: var(--pibico-font-heading);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--pibico-near-black);
}

.product-source {
  font-size: 0.72rem;
  font-weight: 600;
  padding: 0.2rem 0.6rem;
  border-radius: 20px;
  background: var(--pibico-steel-pale);
  color: var(--pibico-steel-blue);
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.product-source.cached {
  background: #ecfdf5;
  color: #065f46;
}

/* --- Product Barcode Preview --- */
.product-barcode {
  display: flex;
  justify-content: center;
  padding: 1rem 0;
  margin-bottom: 0.75rem;
  background: #f8f9fb;
  border-radius: var(--pibico-radius-sm);
}

.product-barcode svg {
  max-width: 320px;
  width: 100%;
  height: auto;
}

.product-barcode:empty {
  display: none;
}

.product-info {
  display: grid;
  gap: 0.75rem;
}

.product-field {
  display: flex;
  gap: 0.75rem;
}

.field-label {
  min-width: 80px;
  font-family: var(--pibico-font-heading);
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  color: var(--pibico-grey-dark);
  padding-top: 2px;
}

.field-value {
  font-size: 0.9rem;
  color: var(--pibico-near-black);
}

/* --- Not Found Card --- */
.not-found-card {
  padding: 2rem !important;
  text-align: center;
}

.not-found-icon {
  color: var(--pibico-grey-mid);
  margin-bottom: 0.75rem;
}

.not-found-icon svg {
  opacity: 0.4;
}

.not-found-card p {
  font-size: 0.9rem;
  color: var(--pibico-grey-dark);
}

.btn-add-manual {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 1rem;
  padding: 0.5rem 1.25rem;
  border: none;
  border-radius: var(--pibico-radius-sm);
  font-family: var(--pibico-font-button);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  background: var(--pibico-steel-blue);
  color: var(--pibico-white);
  transition: all 0.2s ease;
}

.btn-add-manual:hover {
  background: var(--pibico-steel-dark);
}

.manual-entry-card {
  padding: 1.5rem !important;
}

/* =============================================
   SCAN TAB
   ============================================= */
.scan-dropzone {
  border: 2px dashed var(--pibico-light-grey);
  border-radius: var(--pibico-radius-sm);
  padding: 2rem;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s ease;
  min-height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.5rem;
}

.scan-dropzone:hover {
  border-color: var(--pibico-steel-blue);
  background: rgba(70, 130, 180, 0.04);
}

.scan-dropzone.drag-over {
  border-color: var(--pibico-steel-blue);
  background: rgba(70, 130, 180, 0.08);
}

#scanPlaceholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: var(--pibico-grey-mid);
  font-size: 0.85rem;
}

#scanPlaceholder svg {
  opacity: 0.4;
}

/* --- Scan Mode Toggle --- */
.scan-mode-toggle {
  display: flex;
  gap: 0.25rem;
  margin-bottom: 1rem;
  background: var(--pibico-light-grey);
  border-radius: var(--pibico-radius-sm);
  padding: 3px;
  width: fit-content;
}

.scan-mode-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 1rem;
  border: none;
  border-radius: calc(var(--pibico-radius-sm) - 2px);
  background: transparent;
  cursor: pointer;
  font-family: var(--pibico-font-button);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--pibico-grey-dark);
  transition: all 0.2s ease;
}

.scan-mode-btn.active {
  background: var(--pibico-white);
  color: var(--pibico-steel-blue);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}

.scan-mode-content {
  display: none;
}

.scan-mode-content.active {
  display: block;
}

/* --- Camera --- */
.camera-container {
  position: relative;
  border-radius: var(--pibico-radius-sm);
  overflow: hidden;
  background: #000;
  min-height: 240px;
  margin-bottom: 0.5rem;
}

.camera-container video {
  width: 100%;
  display: block;
  border-radius: var(--pibico-radius-sm);
}

.camera-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: var(--pibico-radius-sm);
}

/* Barcode guide rectangle */
.camera-guide {
  position: absolute;
  top: 25%;
  left: 10%;
  right: 10%;
  bottom: 25%;
  border: 2px solid rgba(70, 130, 180, 0.5);
  border-radius: 8px;
}

.camera-guide::before,
.camera-guide::after {
  content: '';
  position: absolute;
  width: 20px;
  height: 20px;
  border-color: var(--pibico-steel-blue);
  border-style: solid;
}

.camera-guide::before {
  top: -2px; left: -2px;
  border-width: 3px 0 0 3px;
  border-radius: 6px 0 0 0;
}

.camera-guide::after {
  bottom: -2px; right: -2px;
  border-width: 0 3px 3px 0;
  border-radius: 0 0 6px 0;
}

.scan-line {
  position: absolute;
  left: 12%;
  right: 12%;
  height: 2px;
  background: linear-gradient(90deg, transparent, #B33A2B, transparent);
  top: 50%;
  box-shadow: 0 0 8px rgba(179, 58, 43, 0.5);
  animation: scanLine 1.8s ease-in-out infinite;
}

@keyframes scanLine {
  0%, 100% { top: 28%; opacity: 0.5; }
  50% { top: 72%; opacity: 1; }
}

/* Scan indicator */
.camera-scan-indicator {
  position: absolute;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  font-size: 0.72rem;
  font-family: var(--pibico-font-button);
  font-weight: 600;
  border-radius: 20px;
  letter-spacing: 0.3px;
}

.indicator-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #B33A2B;
  animation: pulse 1s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}

/* Active camera button */
.camera-active {
  background: var(--pibico-red-brick) !important;
  box-shadow: 0 3px 12px rgba(179, 58, 43, 0.3) !important;
}

.camera-active:hover {
  background: var(--pibico-brick-dark) !important;
}

/* --- Scan Results --- */
.scan-results-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.scan-result-item {
  padding: 1rem 1.25rem;
  background: var(--pibico-white);
  border-radius: var(--pibico-radius);
  box-shadow: var(--pibico-card-shadow);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.scan-result-data {
  flex: 1;
  min-width: 0;
}

.scan-result-data .result-value {
  font-family: var(--pibico-font-heading);
  font-size: 1rem;
  font-weight: 700;
  color: var(--pibico-near-black);
  word-break: break-all;
}

.scan-result-data .result-type {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--pibico-steel-blue);
  text-transform: uppercase;
  letter-spacing: 0.3px;
  margin-top: 2px;
}

.scan-result-actions {
  display: flex;
  gap: 0.35rem;
  flex-shrink: 0;
}

.scan-result-actions button {
  padding: 0.35rem 0.65rem;
  border: none;
  border-radius: var(--pibico-radius-sm);
  font-family: var(--pibico-font-button);
  font-size: 0.75rem;
  font-weight: 500;
  cursor: pointer;
  background: var(--pibico-light-grey);
  color: var(--pibico-grey-dark);
  transition: all 0.2s ease;
}

.scan-result-actions button:hover {
  background: var(--pibico-steel-pale);
  color: var(--pibico-steel-dark);
}

/* =============================================
   PRODUCTS TAB — Datatable Style
   ============================================= */
.products-layout {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  width: 100%;
}

/* --- Toolbar: search + count --- */
.products-toolbar {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.products-search-wrap {
  position: relative;
  flex: 1;
  max-width: 360px;
  display: flex;
  align-items: center;
}

.products-search-wrap > svg {
  position: absolute;
  left: 10px;
  color: var(--pibico-grey-mid);
  pointer-events: none;
}

.products-search-wrap .pibico-input {
  padding-left: 32px;
  padding-right: 28px;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(10px);
  border: 1.5px solid rgba(255, 255, 255, 0.3);
}

.products-search-wrap .pibico-input:focus {
  background: rgba(255, 255, 255, 0.95);
  border-color: #fff;
  box-shadow: 0 0 0 3px rgba(70, 130, 180, 0.12);
}

.products-search-clear {
  position: absolute;
  right: 6px;
  width: 20px;
  height: 20px;
  border: none;
  border-radius: 50%;
  background: var(--pibico-grey-mid);
  color: var(--pibico-white);
  font-size: 0.75rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.products-count {
  font-family: var(--pibico-font-heading);
  font-size: 0.78rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.8);
  white-space: nowrap;
}

/* --- Frosted-glass list container --- */
.products-list-card {
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

/* --- Column header row --- */
.products-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 16px;
  background: rgba(0, 0, 0, 0.03);
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  font-family: var(--pibico-font-heading);
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--pibico-grey-dark);
}

.ph-code   { width: 120px; flex-shrink: 0; }
.ph-name   { flex: 1; min-width: 0; }
.ph-detail { width: 140px; flex-shrink: 0; }
.ph-source { width: 90px; flex-shrink: 0; text-align: center; }
.ph-action { width: 72px; flex-shrink: 0; }

/* --- Product rows (flex, like shortener link-row) --- */
.product-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 3px 16px;
  border-bottom: 1px solid #f0f0f0;
  transition: background 0.15s;
}

.product-row:last-child {
  border-bottom: none;
}

.product-row:hover {
  background: #f8f9fa;
}

/* Row: code chip */
.pr-code {
  width: 120px;
  flex-shrink: 0;
  background: #e3edf5;
  color: #2c5171;
  padding: 4px 10px;
  border-radius: 20px;
  font-family: monospace;
  font-size: 0.8rem;
  font-weight: 600;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
  transition: background 0.2s;
}

.pr-code:hover {
  background: #c9dbe9;
}

/* Row: product info (name + category/brand stacked on mobile) */
.pr-info {
  flex: 1;
  min-width: 0;
}

.pr-name {
  font-family: var(--pibico-font-heading);
  font-weight: 600;
  font-size: 0.9rem;
  color: #333;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pr-sub {
  font-size: 0.75rem;
  color: #999;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 1px;
  display: none;
}

/* Row: detail columns (desktop only) */
.pr-detail {
  width: 140px;
  flex-shrink: 0;
  font-size: 0.82rem;
  color: #666;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Row: source badge */
.pr-source {
  width: 90px;
  flex-shrink: 0;
  text-align: center;
}

.source-badge {
  display: inline-block;
  font-size: 0.65rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  background: #e3edf5;
  color: #2c5171;
}

.source-badge.source-local  { background: #d4edda; color: #155724; }
.source-badge.source-manual { background: #fff3cd; color: #856404; }

a.source-badge {
  text-decoration: none;
  cursor: pointer;
  transition: filter 0.2s, transform 0.15s;
}

a.source-badge:hover {
  filter: brightness(0.9);
  transform: scale(1.05);
}

/* Row: action buttons */
.pr-actions {
  width: 72px;
  flex-shrink: 0;
  display: flex;
  gap: 2px;
  justify-content: center;
}

.btn-delete-product {
  width: 32px;
  height: 32px;
  border: none;
  border-radius: var(--pibico-radius-sm);
  background: transparent;
  color: #999;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.btn-delete-product:hover {
  background: var(--pibico-brick-pale);
  color: var(--pibico-red-brick);
}

/* --- Pagination --- */
.products-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 4px 0;
}

.btn-page {
  background: rgba(255, 255, 255, 0.85);
  border: none;
  padding: 8px 14px;
  border-radius: 8px;
  font-family: var(--pibico-font-button);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--pibico-steel-blue);
  cursor: pointer;
  transition: background 0.2s;
}

.btn-page:hover:not(:disabled) {
  background: rgba(255, 255, 255, 1);
}

.btn-page:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.page-info {
  font-family: var(--pibico-font-heading);
  font-size: 0.78rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.8);
  padding: 0 8px;
}

/* --- Loading & empty --- */
.products-loading,
.products-empty {
  padding: 48px 32px;
  text-align: center;
  color: #999;
  font-family: var(--pibico-font-body);
  font-size: 0.88rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
}

.products-empty svg {
  opacity: 0.3;
  color: var(--pibico-grey-mid);
}

/* =============================================
   SETTINGS PANEL
   ============================================= */
.panel-section {
  margin-bottom: 16px;
}

.panel-section-title {
  font-family: var(--pibico-font-heading);
  font-size: 0.7rem;
  text-transform: uppercase;
  color: var(--pibico-grey-dark);
  font-weight: 700;
  margin-bottom: 8px;
  letter-spacing: 0.5px;
}

.btn-save {
  width: 100%;
  margin-top: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.6rem 1.25rem;
  border: none;
  border-radius: var(--pibico-radius-sm);
  font-family: var(--pibico-font-button);
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  background: var(--pibico-steel-blue);
  color: var(--pibico-white);
  transition: all 0.2s ease;
}

.btn-save:hover {
  background: var(--pibico-steel-dark);
}

/* --- Spinner --- */
.spinner {
  width: 20px;
  height: 20px;
  border: 3px solid rgba(255, 255, 255, 0.3);
  border-top-color: white;
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
  display: inline-block;
}

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

/* --- Muted text --- */
.text-muted {
  font-size: 0.75rem;
  color: var(--pibico-grey-dark);
}

/* =============================================
   RESPONSIVE
   ============================================= */
@media (max-width: 768px) {
  /* Prevent iOS auto-zoom on focus (requires >= 16px) */
  input, select, textarea {
    font-size: 16px !important;
  }

  .app-main {
    padding: 1rem 8px;
  }

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

  .preview-area {
    min-height: 200px;
  }

  .navbar {
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    left: 8px;
    right: 8px;
  }

  .form-card {
    padding: 1.25rem !important;
  }

  .form-row {
    grid-template-columns: 1fr;
  }

  .form-actions {
    flex-direction: column;
  }

  .btn-generate,
  .btn-clear {
    width: 100%;
  }

  .results-column {
    gap: 1rem;
  }

  .main-tabs {
    width: 100%;
  }

  .main-tab {
    flex: 1;
    justify-content: center;
    padding: 0.5rem 0.5rem;
    font-size: 0.78rem;
  }

  .hide-mobile {
    display: none !important;
  }

  .products-toolbar {
    flex-direction: column;
    align-items: stretch;
  }

  .products-search-wrap {
    max-width: 100%;
  }

  .products-count {
    text-align: center;
  }

  /* On mobile: hide detail columns, show sub-line instead */
  .pr-detail { display: none; }
  .pr-sub { display: block; }
  .pr-code { width: auto; max-width: 110px; font-size: 0.72rem; }
  .pr-source { width: auto; }
  .products-header { display: none !important; }

  /* Footer */
  .app-footer {
    padding: 0.35rem 0.75rem;
    flex-wrap: wrap;
    justify-content: center;
  }

  /* Camera container — wider guide for barcodes */
  .camera-container {
    min-height: 200px;
    aspect-ratio: 16 / 9;
  }

  .camera-container video {
    object-fit: cover;
  }

  .camera-guide {
    top: 12%;
    left: 4%;
    right: 4%;
    bottom: 12%;
  }

  .scan-line {
    left: 6%;
    right: 6%;
  }

  /* Color inputs wrap on mobile */
  .color-input-wrap {
    flex-wrap: wrap;
  }

  /* Panel body padding */
  .pibico-panel-body {
    padding: 12px;
  }

  /* Scan result actions: 44px min tap targets */
  .scan-result-actions button {
    min-height: 44px;
    min-width: 44px;
    padding: 0.45rem 0.75rem;
  }

  /* Scan mode toggle: full-width buttons */
  .scan-mode-toggle {
    width: 100%;
  }

  .scan-mode-btn {
    flex: 1;
    justify-content: center;
  }

  /* Preview actions wrap */
  .preview-actions {
    flex-wrap: wrap;
  }
}

/* =============================================
   SMALL PHONES (480px)
   ============================================= */
@media (max-width: 480px) {
  .navbar {
    padding: 0.4rem 0.75rem;
    left: 6px;
    right: 6px;
    top: 6px;
  }

  .navbar-title {
    font-size: 0.95rem;
  }

  .nav-link {
    font-size: 0.72rem;
    padding: 0.3rem 0.5rem;
  }

  .app-footer {
    left: 6px;
    right: 6px;
    bottom: 6px;
    font-size: 0.65rem;
    gap: 0.35rem;
    padding: 0.3rem 0.5rem;
  }

  .app-main {
    margin-top: 56px;
    margin-bottom: 40px;
    padding: 0.75rem 6px;
  }

  .camera-container {
    min-height: 180px;
  }

  .camera-guide {
    top: 10%;
    left: 2%;
    right: 2%;
    bottom: 10%;
  }

  .scan-line {
    left: 4%;
    right: 4%;
  }

  .camera-guide::before,
  .camera-guide::after {
    width: 14px;
    height: 14px;
  }

  .camera-scan-indicator {
    font-size: 0.65rem;
    padding: 3px 8px;
    gap: 4px;
  }

  .indicator-dot {
    width: 5px;
    height: 5px;
  }

  .form-card {
    padding: 1rem !important;
  }

  .btn-generate,
  .btn-clear {
    font-size: 0.82rem;
    padding: 0.6rem 0.75rem;
  }

  .preview-area {
    min-height: 160px;
    padding: 1.25rem;
  }

  .product-row {
    padding: 3px 10px;
    gap: 8px;
  }

  .main-tabs {
    padding: 3px;
  }

  .main-tab {
    padding: 0.4rem 0.35rem;
    font-size: 0.72rem;
    gap: 0.25rem;
  }

  .main-tab svg {
    width: 14px;
    height: 14px;
  }

  .scan-dropzone {
    padding: 1.25rem;
  }

  .btn-page {
    min-height: 44px;
    min-width: 44px;
    padding: 8px 12px;
  }
}

/* =============================================
   VERY NARROW PHONES (375px)
   ============================================= */
@media (max-width: 375px) {
  .navbar-title {
    font-size: 0.85rem;
  }

  .main-tab {
    font-size: 0.68rem;
  }

  .app-footer {
    font-size: 0.6rem;
  }

  .color-input-wrap {
    flex-direction: column;
    align-items: stretch;
  }

  .color-input-wrap input[type="color"] {
    width: 100%;
    height: 32px;
  }

  .color-hex {
    width: 100% !important;
  }

  .pr-code {
    max-width: 90px;
    font-size: 0.68rem;
  }
}