:root{
  --ink:#0f172a; --muted:#64748b; --brand:#2563eb; --brand-2:#1d4ed8; --ring:rgba(37,99,235,.18);
  --bd:#e5e7eb; --bd2:#f1f5f9; --bg:#ffffff; --bg-soft:#f8fafc; --ok:#16a34a; --warn:#ca8a04; --err:#dc2626;
}
#fmp-ig-dash *{box-sizing:border-box}
#fmp-ig-dash{font-family:system-ui,-apple-system,Segoe UI,Roboto,Inter,Ubuntu,sans-serif;color:var(--ink)}
.fmp-wrap{background:var(--bg);border:1px solid var(--bd);border-radius:16px;padding:18px;box-shadow:0 6px 20px rgba(2,6,23,.05)}
.fmp-head{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;margin-bottom:12px}
.fmp-title{margin:0;font-size:20px}
.fmp-sub{color:var(--muted);font-size:13px}

.fmp-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:16px}
@media(max-width:900px){.fmp-grid{grid-template-columns:1fr}}

.fmp-card{background:#fff;border:1px solid var(--bd);border-radius:14px;padding:14px}
.fmp-card h3{margin:0 0 10px;font-size:16px}

.fmp-btn{appearance:none;border:1px solid var(--bd);background:#fff;border-radius:12px;padding:10px 14px;font-weight:700;cursor:pointer;transition:.2s;
         box-shadow:0 1px 0 #fff,0 1px 2px rgba(2,6,23,.04)}
.fmp-btn:hover{transform:translateY(-1px)}
.fmp-btn:focus{outline:none;box-shadow:0 0 0 4px var(--ring)}
.fmp-btn.primary{background:var(--brand);border-color:var(--brand);color:#fff}
.fmp-btn.primary:hover{background:var(--brand-2)}
.fmp-btn.ghost{background:#fff}
.fmp-btn.icon{display:inline-flex;gap:8px;align-items:center}

.fmp-row{display:grid;gap:10px}
.fmp-row.two{grid-template-columns:1fr 1fr}
@media(max-width:700px){.fmp-row.two{grid-template-columns:1fr}}

.fmp-input, .fmp-textarea, .fmp-number{
  width:100%;padding:10px 12px;border:1px solid var(--bd);border-radius:12px;background:#fff;
}
.fmp-textarea{min-height:84px;resize:vertical}
.fmp-label{font-size:12px;color:var(--muted);margin:22px 2px 2px}

.fmp-toolbar{display:flex;gap:8px;flex-wrap:wrap}
.fmp-status{font-size:13px;color:var(--muted)}
.fmp-divider{border:0;border-top:1px solid var(--bd);margin:12px 0}

.fmp-table-wrap{border:1px solid var(--bd);border-radius:12px;overflow:auto;background:#fff}
.fmp-table{width:100%;border-collapse:separate;border-spacing:0}
.fmp-table th,.fmp-table td{padding:10px;border-bottom:1px solid var(--bd2);font-size:14px;text-align:left}
.fmp-table thead th{position:sticky;top:0;background:var(--bg-soft);z-index:1}
.fmp-empty{padding:12px;color:var(--muted);font-size:14px}

.fmp-badge{display:inline-block;padding:4px 8px;border-radius:999px;background:#eff6ff;border:1px solid #dbeafe;color:#1e40af;font-size:12px}
.fmp-note{font-size:12px;color:var(--muted);margin-top:6px}
.fmp-toast{display:none;margin-top:10px;padding:10px 12px;border-radius:10px}
.fmp-toast.ok{display:block;background:#ecfdf5;border:1px solid #bbf7d0;color:#065f46}
.fmp-toast.err{display:block;background:#fef2f2;border:1px solid #fecaca;color:#7f1d1d}


/* Lock background scroll when modal is open (toggled via JS below) */
.body-lock { overflow: hidden; }

/* Safer defaults if you prefer class selectors over inline styles */
#fmp-edit-dialog { width:min(720px,95vw); max-height:90vh; display:flex; flex-direction:column; overflow:hidden; }
#fmp-edit-form { display:flex; flex-direction:column; min-height:0; }
.fmp-modal-body { flex:1 1 auto; overflow:auto; min-height:60; }
.fmp-modal-footer { position:sticky; bottom:0; background:#fff; border-top:1px solid var(--bd); padding-top:8px; display:flex; gap:8px; }
#fmp-edit-preview { flex: 1 1 auto; min-height:300; max-height:none; overflow:auto; }
#fmp-edit-preview-img { width:100%; height:auto; max-height:50vh; object-fit:contain; }


/* --- Mobile polish --- */
@media (max-width: 640px){
  .fmp-head { align-items:flex-start }
  .fmp-toolbar { width:100% }
  .fmp-card h3 { font-size:15px }
  .fmp-btn { padding:10px 12px; border-radius:10px }
  .fmp-row.two { grid-template-columns:1fr } /* already present, keep */
  /* Table: let it breathe and scroll */
  .fmp-table-wrap { -webkit-overflow-scrolling: touch }
  .fmp-table th, .fmp-table td { padding:9px 10px; font-size:13px; white-space:nowrap }
  /* Hide less-important columns on very small screens */
  #fmp-table th:nth-child(2),
  #fmp-table td:nth-child(2),
  #fmp-table th:nth-child(4),
  #fmp-table td:nth-child(4) { display:none }

  /* Allow table cells to wrap so the table doesn't overflow */
 /* Allow the tab row to wrap instead of falling off */
  .fmp-tabs{
    flex-wrap: wrap;
    row-gap: 4px;
  }

  /* Make tabs a bit more compact on small screens */
  .fmp-tab{
    flex: 1 1 45%;
    text-align: center;
  }
}

/* chips for times list */
.fmp-chip { display:inline-flex; gap:6px; align-items:center; padding:4px 8px; border:1px solid var(--bd); border-radius:999px; margin-right:6px; margin-bottom:6px; }
.fmp-chip button { border:none; background:transparent; cursor:pointer; font-weight:700; }


/* --- Mobile overflow fixes --- */
#fmp-ig-dash,
#fmp-ig-dash .fmp-wrap { width:100%; max-width:100%; overflow-x:hidden; }

/* Grid items default to min-width:auto which can force overflow. */
#fmp-ig-dash .fmp-grid > * { min-width: 0; }

/* Cards & table wrapper must be allowed to shrink */
#fmp-ig-dash .fmp-card,
#fmp-ig-dash .fmp-table-wrap { min-width: 0; max-width: 100%; }

/* Table: keep scroll inside the wrapper, not the page */
#fmp-ig-dash .fmp-table-wrap {
  display:block;
  overflow-x:auto;
  -webkit-overflow-scrolling: touch;
}

/* Wrap long text, captions, code, and URLs */
#fmp-ig-dash .fmp-note,
#fmp-ig-dash .fmp-status,
#fmp-ig-dash .fmp-table td,
#fmp-ig-dash .fmp-input,
#fmp-ig-dash .fmp-textarea { 
  word-break: break-word;
  overflow-wrap: anywhere;
}
#fmp-ig-dash code { white-space: pre-wrap; }

/* Media: never overflow card width */
#fmp-ig-dash img, 
#fmp-ig-dash video { max-width:100%; height:auto; }

/* Modal safety on small screens */
#fmp-edit-dialog { width:min(720px, 95vw); max-width:95vw; }
.fmp-modal-body { min-width:0; } /* prevents grid child overflow inside modal */




/* Tabs */
.fmp-tabs{ display:flex; gap:8px; border-bottom:1px solid var(--bd); margin:6px 0 14px }
.fmp-tab{ appearance:none; background:transparent; border:none; padding:10px 12px;
  border-radius:10px 10px 0 0; font-weight:600; cursor:pointer; color:var(--muted) }
.fmp-tab:hover{ background:var(--bg-soft) }
.fmp-tab.is-active{ color:var(--ink); background:#fff; border:1px solid var(--bd); border-bottom-color:#fff }

.fmp-panels{ margin-top:6px }
.fmp-panel{ display:none }
.fmp-panel.is-active{ display:block }

/* More breathing room + typography polish */
#fmp-ig-dash{ line-height:1.45 }
.fmp-grid{ gap:24px }                 /* was 16px */
.fmp-card{ padding:18px }             /* was 14px */
.fmp-card h3{ font-size:17px }        /* slightly larger */
.fmp-row{ gap:12px }                  /* was 10px */
.fmp-input,.fmp-textarea{ padding:12px 14px } /* bigger tap targets */
.fmp-label{ margin:18px 2px 4px }     /* clearer spacing */

.fmp-table th,.fmp-table td{ padding:12px 10px }  /* table readability */
.fmp-table tbody tr:nth-child(even){ background:#fafbff } /* light zebra */

/* Stronger button styles scoped to our dashboard to beat theme overrides */
#fmp-ig-dash .fmp-btn{
  appearance:none;
  border:1px solid var(--bd);
  background:#fff;
  border-radius:12px;
  padding:10px 14px;
  font-weight:700;
  cursor:pointer;
  transition:.2s;
  box-shadow:0 1px 0 #fff,0 1px 2px rgba(2,6,23,.04);
}
#fmp-ig-dash .fmp-btn.primary{
  background:var(--brand);
  border-color:var(--brand);
  color:#fff;
}
#fmp-ig-dash .fmp-btn.primary:hover{
  background:var(--brand-2);
}
#fmp-ig-dash .fmp-btn.ghost{
  background:#fff;
}
#fmp-ig-dash .fmp-btn.icon{
  display:inline-flex;
  gap:8px;
  align-items:center;
}

/* --- Strengthen styles for buttons & typography, including Edit modal --- */
#fmp-ig-dash,
#fmp-edit-modal {
  font-family: system-ui,-apple-system,Segoe UI,Roboto,Inter,Ubuntu,sans-serif;
  font-size: 14px;
}

#fmp-edit-modal .fmp-card,
#fmp-edit-modal .fmp-input,
#fmp-edit-modal .fmp-textarea,
#fmp-edit-modal .fmp-btn {
  font-size: 14px;
}

/* Buttons inside main dash and edit modal */
#fmp-ig-dash .fmp-btn,
#fmp-edit-modal .fmp-btn{
  appearance:none;
  border:1px solid var(--bd);
  background:#fff;
  border-radius:12px;
  padding:10px 14px;
  font-weight:700;
  cursor:pointer;
  transition:.2s;
  box-shadow:0 1px 0 #fff,0 1px 2px rgba(2,6,23,.04);
}

#fmp-ig-dash .fmp-btn.primary,
#fmp-edit-modal .fmp-btn.primary{
  background:var(--brand);
  border-color:var(--brand);
  color:#fff;
}

#fmp-ig-dash .fmp-btn.primary:hover,
#fmp-edit-modal .fmp-btn.primary:hover{
  background:var(--brand-2);
}

#fmp-ig-dash .fmp-btn.ghost,
#fmp-edit-modal .fmp-btn.ghost{
  background:#fff;
}

#fmp-ig-dash .fmp-btn.icon,
#fmp-edit-modal .fmp-btn.icon{
  display:inline-flex;
  gap:8px;
  align-items:center;
}

/* Ensure modal footer buttons don't get squeezed or misaligned */
#fmp-edit-modal .fmp-modal-footer .fmp-btn {
  white-space: nowrap;
}


/* --- Preview action bar (Test prompts + Post preview) --- */
#fmp-ig-dash .fmp-actionbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  flex-wrap:wrap;
  margin-top:10px;
  padding:10px 12px;
  border:1px solid var(--bd);
  border-radius:12px;
  background:var(--bg-soft);
}

#fmp-ig-dash .fmp-actionbar-left{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}

#fmp-ig-dash .fmp-actionbar-right{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}

#fmp-ig-dash .fmp-actionbar .fmp-status{
  margin:0;
}

/* Make sure preview always stays full-width and stacks nicely */
#fmp-ig-dash #fmp-preview,
#fmp-ig-dash #fmp-edit-preview{
  width:100%;
}

#fmp-ig-dash #fmp-preview-wrap{
  display:grid;
  grid-template-columns:1fr; /* prevents “image on the right” layouts */
  gap:10px;
}

#fmp-ig-dash #fmp-preview-img,
#fmp-ig-dash #fmp-preview-video,
#fmp-ig-dash #fmp-edit-preview-img,
#fmp-ig-dash #fmp-edit-preview-video{
  width:100%;
  max-height:55vh;
  object-fit:contain;
}
/* Force preview to stack UNDER the buttons */
#fmp-ig-dash .fmp-preview-stack{
  display:flex;
  flex-direction:column;
  gap:10px;
}

/* Make sure preview can't become a side-column */
#fmp-ig-dash #fmp-preview,
#fmp-ig-dash #fmp-edit-preview{
  width:100%;
  max-width:100%;
}

/* ── TikTok "Coming soon" disabled button ───────────────────────────────── */
.fmp-btn--disabled,
.fmp-btn[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none; /* prevent any JS click from firing */
}

/* Small badge label */
.fmp-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: rgba(255,255,255,0.25);
  border-radius: 4px;
  padding: 1px 5px;
  margin-left: 4px;
  vertical-align: middle;
}

/* ============================================================
   APPROVAL FLOW — styles for pending tab, cards, review modal
   ============================================================ */

/* Tab badge (amber) */
.fmp-approvals-badge {
  background:    #fef3c7 !important;
  border-color:  #fde68a !important;
  color:         #92400e !important;
  font-variant-numeric: tabular-nums;
  min-width: 20px;
  text-align: center;
}

/* Pending post cards */
.fmp-pending-card {
  transition: box-shadow .15s;
}
.fmp-pending-card:hover {
  box-shadow: 0 4px 14px rgba(2,6,23,.09);
}
.fmp-pending-card img {
  width:   80px;
  height:  80px;
  object-fit: cover;
  border-radius: 8px;
  flex-shrink: 0;
}

/* Review modal overlay */
#fmp-review-modal {
  display: none;
  position: fixed;
  inset: 0;
  padding: 16px;
  background: rgba(15,23,42,.5);
  align-items: center;
  justify-content: center;
  z-index: 2147483647;
}

/* Review modal dialog */
#fmp-review-modal > div {
  box-shadow: 0 16px 48px rgba(2,6,23,.18);
}

/* Image options details/summary */
#fmp-review-image-options summary::-webkit-details-marker { display: none; }
#fmp-review-image-options summary::before {
  content: '▶';
  display: inline-block;
  margin-right: 6px;
  transition: transform .2s;
}
#fmp-review-image-options[open] summary::before {
  transform: rotate(90deg);
}

/* Require-approval toggle row */
.fmp-approval-toggle {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
  padding: 10px 12px;
  border: 1px solid var(--bd);
  border-radius: 10px;
  background: var(--bg-soft);
  user-select: none;
}
.fmp-approval-toggle input[type=checkbox] {
  width: 16px;
  height: 16px;
  margin-top: 2px;
  accent-color: var(--brand);
  flex-shrink: 0;
}