/* ==========================================================================
   London Gulf Nexus - LinkedIn Content Studio page styles
   Reuses ca-* primitives from certificates-admin.css; this only adds the
   studio-specific config grid, row table and preview panel.
   ========================================================================== */

.ls-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 420px;
  gap: 24px;
  align-items: start;
}
@media (max-width: 900px) {
  .ls-grid { grid-template-columns: 1fr; }
}

.ls-config {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  align-items: flex-end;
}
.ls-config .ls-field { display: flex; flex-direction: column; gap: 7px; }

.ls-summary {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--navy-700);
  margin: 4px 0 0;
}

/* row table */
.ls-table { width: 100%; border-collapse: collapse; font-size: 0.86rem; }
.ls-table th {
  text-align: left; font-family: var(--font-display); font-weight: 700;
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--text-muted); padding: 9px 10px;
  border-bottom: 2px solid var(--border-subtle); white-space: nowrap;
}
.ls-table td {
  padding: 8px 10px; border-bottom: 1px solid var(--border-subtle);
  color: var(--navy-700); vertical-align: middle;
}
.ls-wrap { overflow-x: auto; max-height: 560px; overflow-y: auto; }
.ls-dim { color: var(--text-muted); font-size: 0.8rem; }
.ls-actions { white-space: nowrap; }
.ls-mini { padding: 4px 10px !important; font-size: 12px !important; margin-left: 4px; }

.ls-tag {
  display: inline-flex; align-items: center; font-family: var(--font-display);
  font-weight: 700; font-size: 10px; padding: 2px 7px; border-radius: var(--radius-pill);
  letter-spacing: 0.04em;
}
.ls-tag--en { background: var(--navy-50); color: var(--navy-700); }
.ls-tag--ar { background: color-mix(in srgb, var(--gold-500) 18%, transparent); color: var(--gold-700, #8a6608); }

/* preview panel */
.ls-preview-panel { position: sticky; top: 20px; }
.ls-preview-frame {
  background: var(--navy-900);
  border-radius: var(--radius-lg);
  padding: 16px;
  display: flex; align-items: center; justify-content: center;
}
#ls-preview {
  width: 100%; height: auto; max-height: 60vh; object-fit: contain;
  border-radius: 6px; box-shadow: var(--shadow-lg);
}
.ls-preview-meta {
  font-size: 0.82rem; color: var(--text-muted); margin: 10px 2px 0; text-align: center;
}

/* progress */
.ls-progress-track { width: 100%; height: 10px; border-radius: 999px; background: var(--navy-50); overflow: hidden; }
.ls-progress-bar { height: 100%; background: var(--gold-500); width: 0%; transition: width .2s; }