/* Web Upload Item Details (product preview/edit) */
:root{
  --ab-surface:#ffffff;
  --ab-border:#e2e8f0;
  --ab-soft:#f7fafc;
  --ab-bg:#f5f7fb;
  --ab-primary:#2563eb;
  --ab-primary-ink:#1565c0;
  --ab-ink:#1a202c;
  --ab-muted:#4a5568;
}

/* Prevent page-level scrolling on this view; scroll inside columns */
html, body { height:100%; overflow:hidden; }

.ab-item-details-page{
  height:100vh;
  box-sizing:border-box;
  padding:20px 28px;
  background:#fafbfc; /* safe default, page base overrides if needed */
  display:flex;
  flex-direction:column;
  min-height:0; /* allow inner scroll */
}

.ab-details-header{ display:flex; align-items:center; gap:12px; margin-bottom:16px; flex-shrink:0; }
.ab-details-header a{ font-size:1.2rem; color:var(--ab-ink); text-decoration:none; }
.ab-details-header h5{ margin:0; font-size:1.1rem; font-weight:600; color:var(--ab-ink); }

/* Shell takes remaining height and provides internal scrolling areas */
.ab-details-shell{
  flex:1 1 auto;
  background:transparent;
  min-height:0; /* allow children to shrink and scroll */
}

/* Two columns layout, scroll inside columns */
.ab-details-grid{
  display:grid;
  grid-template-columns: 1fr 500px;
  gap:24px;
  width:100%;
  height:100%;
  min-height:0; /* enable overflow children to scroll */
}

/* Left panel */
.ab-details-left{
  display:flex; flex-direction:column;
  background:var(--ab-surface);
  border:1px solid var(--ab-border);
  border-radius:10px;
  min-height:0; /* for scrolling */
  overflow:hidden;
}
.ab-preview-category{ display:flex; align-items:center; justify-content:space-between; background:var(--ab-soft); padding:12px 16px; border-bottom:1px solid var(--ab-border); flex-shrink:0; }
.ab-preview-category h6{ margin:0; font-size:0.95rem; font-weight:700; text-transform:uppercase; letter-spacing:0.03em; color:#2d3748; }
.ab-preview-id{ font-size:0.85rem; color:#718096; }

/* Fields area scrolls; reserve space for sticky actions so it is always visible */
.ab-fields-scroll{ overflow:auto; min-height:0; padding-bottom:72px; }
.ab-fields-table{ width:100%; border-collapse:collapse; }
.ab-fields-table tr{ border-bottom:1px solid #edf2f7; }
.ab-fields-table tr:last-child{ border-bottom:none; }
.ab-fields-table td{ padding:10px 16px; font-size:0.875rem; vertical-align:middle; }
.ab-fields-table td:first-child{ font-weight:700; color:#4a5568; width:200px; text-transform:uppercase; }
.ab-fields-table td:last-child{ color:var(--ab-primary); font-weight:500; }

.ab-field-input{ width:100%; background:transparent; border:none; border-bottom:1px dashed var(--ab-border); padding:4px 0; color:var(--ab-ink); font-weight:500; }
.ab-field-input:focus{ outline:none; border-bottom-color:#90caf9; }
.ab-field-input[readonly]{ color:#4a5568; border-bottom-style:solid; }
.ab-checkbox{ display:flex; align-items:center; gap:8px; color:var(--ab-ink); }
.ab-error{ margin-top:4px; color:#e11d48; font-size:0.8rem; }

/* Custom fields section */
.ab-custom-fields-separator td {
  padding: 16px 16px 8px 16px !important;
  border-bottom: none !important;
}

.ab-section-divider {
  display: flex;
  align-items: center;
  text-align: center;
  margin: 8px 0;
}

.ab-section-divider::before,
.ab-section-divider::after {
  content: '';
  flex: 1;
  border-bottom: 2px solid #e3f2fd;
}

.ab-section-divider span {
  padding: 0 16px;
  font-size: 0.85rem;
  font-weight: 700;
  color: #1a202c;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background: linear-gradient(to bottom, transparent 50%, #f0f9ff 50%);
}

.ab-custom-field-row {
  background: #f8fbff;
}

.ab-custom-field-row:hover {
  background: #f0f9ff;
}

.ab-custom-field-row td:first-child {
  color: #1a202c !important;
  font-weight: 600 !important;
  text-transform: none !important;
}

.ab-custom-field-row .ab-field-input {
  border-bottom-color: #bbdefb;
  color: #1a202c;
}

.ab-custom-field-row .ab-field-input:focus {
  border-bottom-color: #2196f3;
  background: rgba(33, 150, 243, 0.05);
}

/* Sticky actions bar inside scrollable left; full visible without page scroll */
.ab-actions{ position:sticky; bottom:0; display:flex; gap:12px; justify-content:flex-end; padding:12px 16px; border-top:1px solid var(--ab-border); background:#f9fbff; z-index:2; }
#ab-edit-actions { display:flex; gap:12px; }
.btn-primary{ background:var(--ab-primary); color:#fff; border:1px solid #1e40af; border-radius:6px; padding:8px 14px; font-weight:600; cursor:pointer; transition:all 0.2s; }
.btn-primary:hover:not(:disabled){ background:#1e40af; }
.btn-primary:disabled{ opacity:0.5; cursor:not-allowed; }
.btn-secondary{ background:#fff; color:var(--ab-ink); border:1px solid #cbd5e0; border-radius:6px; padding:8px 14px; font-weight:600; text-decoration:none; cursor:pointer; transition:all 0.2s; }
.btn-secondary:hover{ background:#f7fafc; border-color:#a0aec0; }

/* Right panel */
.ab-details-right{ min-height:0; overflow:auto; display:flex; flex-direction:column; gap:16px; }
.ab-image-section{ background:var(--ab-surface); border:1px solid var(--ab-border); border-radius:10px; padding:16px; }
.ab-image-carousel{ position:relative; margin-bottom:12px; }
/* Reduce image area size to avoid dominating the page */
.ab-image-main{ width:100%; height:clamp(220px, 34vh, 360px); border-radius:6px; background:#f2f6fb; display:flex; align-items:center; justify-content:center; position:relative; }
.ab-image-main img{ max-width:100%; max-height:100%; object-fit:contain; cursor:pointer; }
.ab-carousel-nav{ position:absolute; top:50%; transform:translateY(-50%); width:100%; display:flex; justify-content:space-between; padding:0 8px; pointer-events:none; }
.ab-carousel-btn{ pointer-events:all; background:rgba(255,255,255,0.9); border:1px solid var(--ab-border); border-radius:50%; width:28px; height:28px; display:flex; align-items:center; justify-content:center; cursor:pointer; transition:all 0.2s; }
.ab-carousel-btn:hover{ background:#fff; box-shadow:0 2px 8px rgba(0,0,0,0.15); }
.ab-carousel-btn i{ font-size:1rem; color:#4a5568; }
.ab-image-thumbs{ display:flex; gap:10px; overflow-x:auto; padding:4px 0; }
.ab-image-thumb{ flex:0 0 auto; width:64px; height:64px; border-radius:6px; overflow:hidden; cursor:pointer; border:2px solid transparent; transition:border 0.2s; background:#f8f9fa; }
.ab-image-thumb.active{ border-color:var(--ab-primary); }
.ab-image-thumb:hover{ border-color:#cbd5e0; }
.ab-image-thumb img{ width:100%; height:100%; object-fit:cover; }

/* Export section */
.ab-export-section{ background:#e3f2fd; border:1px solid #bbdefb; border-radius:8px; padding:16px; }
.ab-export-title{ font-size:0.9rem; font-weight:700; color:#1565c0; margin-bottom:10px; text-transform:uppercase; letter-spacing:0.03em; }
.ab-export-links{ display:flex; flex-direction:column; gap:8px; }
.ab-export-link{ display:flex; align-items:center; gap:8px; padding:8px 12px; background:#fff; border:1px solid #90caf9; border-radius:6px; color:#1565c0; text-decoration:none; font-size:0.875rem; font-weight:500; transition:all 0.2s; }
.ab-export-link:hover{ background:#e3f2fd; border-color:#64b5f6; }
.ab-export-link i{ font-size:1.1rem; }

/* Thumbnail wrapper with publish toggle */
.ab-image-thumb-wrap{ display:flex; flex-direction:column; align-items:center; gap:4px; flex:0 0 auto; }
.ab-publish-toggle{ background:none; border:1px solid var(--ab-border); border-radius:4px; padding:2px 6px; cursor:pointer; font-size:0.75rem; color:#718096; transition:all 0.2s; display:flex; align-items:center; gap:3px; }
.ab-publish-toggle:hover{ background:#f0f9ff; border-color:#90caf9; color:var(--ab-primary); }
.ab-publish-toggle.published{ color:#16a34a; border-color:#86efac; background:#f0fdf4; }
.ab-publish-toggle.published:hover{ background:#dcfce7; }
.ab-publish-toggle:disabled{ opacity:0.5; cursor:wait; }

/* Lightbox overlay */
.ab-lightbox{ position:fixed; inset:0; z-index:9999; display:flex; align-items:center; justify-content:center; }
.ab-lightbox-backdrop{ position:absolute; inset:0; background:rgba(0,0,0,0.85); }
.ab-lightbox-content{ position:relative; z-index:1; max-width:75vw; max-height:75vh; display:flex; align-items:center; justify-content:center; }
.ab-lightbox-content img{ max-width:75vw; max-height:75vh; object-fit:contain; border-radius:8px; box-shadow:0 8px 40px rgba(0,0,0,0.4); }
.ab-lightbox-close{ position:absolute; top:-14px; right:-14px; background:#fff; border:none; border-radius:50%; width:34px; height:34px; display:flex; align-items:center; justify-content:center; cursor:pointer; box-shadow:0 2px 8px rgba(0,0,0,0.3); font-size:1.1rem; color:#1a202c; z-index:2; transition:all 0.2s; }
.ab-lightbox-close:hover{ background:#f7fafc; box-shadow:0 4px 12px rgba(0,0,0,0.25); }
.ab-lightbox-nav{ position:fixed; top:50%; transform:translateY(-50%); z-index:10000; background:rgba(255,255,255,0.9); border:none; border-radius:50%; width:44px; height:44px; display:flex; align-items:center; justify-content:center; cursor:pointer; box-shadow:0 2px 10px rgba(0,0,0,0.25); font-size:1.3rem; color:#1a202c; transition:all 0.2s; }
.ab-lightbox-nav:hover{ background:#fff; box-shadow:0 4px 14px rgba(0,0,0,0.35); }
.ab-lightbox-prev{ left:24px; }
.ab-lightbox-next{ right:24px; }

/* Responsive */
@media (max-width: 1280px){
  .ab-details-grid{ grid-template-columns: 1fr 460px; }
  .ab-image-main{ height:clamp(200px, 32vh, 320px); }
}
@media (max-width: 1024px){
  .ab-details-grid{ grid-template-columns: 1fr 380px; }
}
@media (max-width: 900px){
  .ab-details-grid{ grid-template-columns: 1fr; }
  .ab-details-right{ order:-1; }
}
@media (max-width: 640px){
  .ab-item-details-page{ padding:12px 14px; }
  .ab-fields-table td:first-child{ width: 160px; }
}