/* Base */
.socialapprove-list,
.socialapprove-list * {
  font-size:16px;
  box-sizing:border-box;
}

/* Container: full-width block flow */
.socialapprove-list{
  width:100%;
  display:block;
  margin:0;
  padding:0;
}

/* Card with 4px status border */
.socialapprove-item{
  display:flex;
  gap:18px;
  padding:16px;
  border:4px solid #e3e5e7; /* default; overridden by status class */
  border-radius:0px;
  background:#fff;
  margin:16px 0;
}

/* Status colors (live-updated by JS when status changes) */
.socialapprove-item.st-wait{        border-color:#9aa0a6; }
.socialapprove-item.st-approved{    border-color:#137333; }
.socialapprove-item.st-not_approved{border-color:#b3261e; }
.socialapprove-item.st-posted{      border-color:#1a73e8; }

/* Left: media (30%) */
.sa-media{
  flex:0 0 40%;
  position:relative;
}
.sa-media img,
.sa-media video {
  width:100%;
  height: auto;
  display:block;
  border-radius:0px;
}

.sa-media iframe {
  width:100%;
  height: 56.25vw; /* 9/16 ratio */
  max-height: 500px; /* optional */
}

/* Carousel */
.sa-carousel{
  position:relative;
  overflow:hidden;
}
.sa-track{
  display:flex;
  transition:transform 220ms ease;
}
.sa-slide{
  min-width:100%;
}
.sa-slide img,
.sa-slide video {
  width:100%;
  height:auto;
  display:block;
  border-radius:0px;
}

.sa-slide iframe {
  width:100%;
  height: 56.25vw; /* 9/16 ratio */
  max-height: 500px; /* optional */
}
.sa-arrow{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  background:#111;
  color:#fff;
  border:none;
  width:36px;
  height:36px;
  border-radius:50%;
  opacity:0.9;
  cursor:pointer;
  z-index:10;
}
.sa-prev{ left:10px; }
.sa-next{ right:10px; }
.sa-carousel.one-slide .sa-arrow{ display:none; }

/* Right: editor (70%) */
.sa-editor{
  flex:1 1 60%;
  min-width:0;
}

/* Header */
.sa-head{
  display:flex;
  flex-direction:column;
  gap:4px;
  margin-bottom:10px;
}
.sa-title{
  margin:0;
  font-size: 25px;
  font-weight:800;
  line-height:1.2;
}
.sa-meta{
  color:#5f6368;
}
.sa-company{
  font-weight:700;
}

/* Edit panel */
.sa-edit-panel{
  border-top:1px dashed #e0e0e0;
  padding-top:12px;
}
.sa-field{
  margin-bottom:12px;
}
.sa-edit-panel label{
  display:block;
  font-weight:900;
  margin-bottom:6px;
}
.sa-edit-panel textarea,
.sa-edit-panel select{
  width:100%;
  border:1px solid #cfd3d7;
  border-radius:4px;
  padding:12px;
  line-height:1.5;
  outline:none;
  background:#fff;
}

/* Platforms row (checkboxes) */
.sa-platforms label{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-weight:600;
  margin-right:12px;
}

/* Rows & buttons */
.sa-row{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px;
  margin:12px 0;
}
.sa-btn{
  display:inline-flex;
  align-items:center;
  gap:6px;
  background:#2f2f2f;
  color:#fff;
  border:none;
  border-radius:0px;
  padding:10px 14px;
  cursor:pointer;
}
.sa-btn:hover{ filter:brightness(1.05); }
.sa-posted{ background:#136f33; }
.sa-save{   background:#0d5aaa; }

.sa-copy-row{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin:6px 0 10px;
}
.sa-save-row{
  display:flex;
  gap:10px;
  align-items:center;
}

.sa-save-status{
  font-size:14px;
  color:#666;
}

/* Toast */
.sa-toast{
  position:fixed;
  left:50%;
  bottom:18px;
  transform:translateX(-50%) translateY(20px);
  background:#111;
  color:#fff;
  padding:10px 14px;
  border-radius:0px;
  font-family: inherit;
  opacity:0;
  pointer-events:none;
  transition:opacity 180ms ease, transform 180ms ease;
  z-index:9999;
  font-weight:700;
}
.sa-toast.show{
  opacity:0.95;
  transform:translateX(-50%) translateY(0);
}

/* Mobile: stack */
@media (max-width: 900px){
  .socialapprove-item{
	flex-direction:column;
  }
  .sa-save-row { gap: 0; }
  .sa-media{ flex:0 0 auto; }
  .sa-editor{ flex:1 1 auto; }
  .sa-btn{ width:100%; justify-content:center; box-sizing:border-box; }
}