/* ═══════════════════════════════════════════════════════════════════════
   MMW Markup Editor styles — shared (Agent Portal + Company Agent Portal).
   Visual rules lifted from the Office System's NPE editor; the split-screen
   layout (.mk-split / #np-editor-panel) is new. Keep IDENTICAL across both
   portals.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Split: form on the LEFT, markup editor on the RIGHT ────────────────── */
.mk-split { display: flex; gap: 18px; align-items: flex-start; }
.mk-split .mk-form { flex: 1 1 auto; min-width: 0; max-width: none; }
#np-editor-panel {
  display: flex; flex-direction: column;
  flex: 0 0 46%; max-width: 46%;
  position: sticky; top: 12px;
  max-height: calc(100vh - 24px);
  background: #0f172a; border: 1px solid #334155; border-radius: 12px;
  padding: 12px; overflow: hidden;
}
#mk-empty {
  color: #94a3b8; font-size: 13px; line-height: 1.5;
  padding: 32px 16px; text-align: center;
}
/* Stack under the form on narrow screens (phones/tablets) — the SAP is a PWA. */
@media (max-width: 900px) {
  .mk-split { flex-direction: column; }
  .mk-split .mk-form,
  #np-editor-panel { flex: none; max-width: 100%; width: 100%; position: relative; max-height: none; }
}

/* ── Editor chrome (from Office System) ─────────────────────────────────── */
.npe-head { display:flex; align-items:center; justify-content:flex-start; margin-bottom:8px; gap:8px; }
.npe-title { font-size:13px; font-weight:700; color:#e2e8f0; }
.npe-pagenav { display:flex; align-items:center; gap:6px; color:#cbd5e1; font-size:12px; white-space:nowrap; }
.npe-pagenav button { background:#1e293b; color:#e2e8f0; border:1px solid #475569; border-radius:6px; width:26px; height:26px; cursor:pointer; font-size:15px; line-height:1; }
/* Reload is a labelled button, not a 26px square — override the square nav sizing */
.npe-pagenav button.mk-reload-btn { width:auto; height:auto; padding:4px 9px; }
.mk-reload-btn { background:#1a2f4a; color:#e2e8f0; border:1px solid #c8a96e; border-radius:6px; padding:4px 9px; font-size:11px; font-weight:700; cursor:pointer; }
.mk-reload-btn:hover { background:#c8a96e; color:#111827; }
/* Save is pinned to the far right, on its own — every other control sits left */
.mk-save-btn { background:#16a34a; color:#fff; border:1px solid #15803d; border-radius:6px; width:auto; height:auto; padding:5px 12px; font-size:11px; font-weight:800; cursor:pointer; margin-left:auto; flex:0 0 auto; }
.mk-save-btn:hover { background:#15803d; }
.mk-save-btn:disabled { opacity:.6; cursor:default; }
.npe-toolbar { display:flex; flex-wrap:wrap; align-items:center; gap:5px; margin-bottom:8px; }
.npe-toolbar button, #npe-crop-row button {
  background:#1e293b; color:#e2e8f0; border:1px solid #475569; border-radius:6px;
  padding:5px 9px; font-size:12px; font-weight:600; cursor:pointer; line-height:1;
}
.npe-toolbar button:hover { background:#334155; }
.npe-toolbar button.active { background:#c8a96e; color:#111827; border-color:#c8a96e; }
.npe-sep { width:1px; height:20px; background:#334155; margin:0 2px; }
.npe-color { width:22px !important; height:22px !important; border-radius:50% !important; padding:0 !important; border:2px solid transparent !important; }
.npe-color.active { outline:2px solid #c8a96e; outline-offset:1px; }
.npe-color[data-c="black"] { border-color:#e2e8f0 !important; }
#npe-pen { width:80px; }
#npe-crop-row { display:flex; align-items:center; gap:6px; margin-bottom:8px; color:#cbd5e1; font-size:11px; flex-wrap:wrap; }
#npe-crop-row input[type=range] { width:60px; }
#npe-adjust-row { display:flex; align-items:center; gap:10px; margin-bottom:8px; color:#cbd5e1; font-size:11px; flex-wrap:wrap; }
#npe-adjust-row input[type=range] { width:90px; }
#npe-adjust-row button { background:#1e293b; color:#e2e8f0; border:1px solid #475569; border-radius:6px; padding:4px 8px; font-size:11px; cursor:pointer; }
.npe-stagerow { flex:1; min-height:0; display:flex; gap:10px; }
.npe-stage { flex:1; min-width:0; overflow:auto; background:#020617; border-radius:8px; display:flex; align-items:flex-start; justify-content:center; padding:10px; }
.npe-loading { color:#94a3b8; font-size:13px; padding:40px; }
.npe-imgwrap { position:relative; line-height:0; box-shadow:0 4px 20px rgba(0,0,0,.5); }
.npe-imgwrap img { display:block; max-width:100%; max-height:calc(100vh - 260px); width:auto; height:auto; user-select:none; -webkit-user-drag:none; cursor:grab; }
/* Page rail — all pages, click to edit, ▲▼ to reorder */
.npe-pagerail { flex:0 0 96px; max-width:96px; overflow-y:auto; display:flex; flex-direction:column; gap:8px; padding-right:2px; }
.npe-rail-item { cursor:pointer; border:2px solid transparent; border-radius:8px; padding:4px; background:#0b1220; }
.npe-rail-item:hover { border-color:#475569; }
.npe-rail-item.active { border-color:#c8a96e; background:#1e293b; }
.npe-rail-item img { width:100%; display:block; border-radius:4px; pointer-events:none; background:#fff; }
.npe-rail-num { font-size:10px; color:#94a3b8; text-align:center; margin-top:3px; }
.npe-rail-arrows { display:flex; justify-content:center; gap:4px; margin-top:3px; }
.npe-rail-arrows button { background:#1e293b; color:#e2e8f0; border:1px solid #475569; border-radius:4px; width:22px; height:20px; font-size:10px; cursor:pointer; padding:0; line-height:1; }
.npe-rail-arrows button:disabled { opacity:.3; cursor:default; }
@media (max-width: 900px) {
  .npe-stagerow { flex-direction:column; }
  .npe-pagerail { flex:0 0 auto; max-width:100%; max-height:120px; flex-direction:row; overflow-x:auto; overflow-y:hidden; }
  .npe-pagerail .npe-rail-item { flex:0 0 84px; max-width:84px; }
}
#npe-canvas { position:absolute; inset:0; touch-action:none; }
#npe-canvas.draw-on { cursor:crosshair; }
.npe-textlayer { position:absolute; inset:0; }
.npe-textlayer.text-on { cursor:text; }
.npe-txt { position:absolute; white-space:pre; font-weight:700; font-family:Arial,Helvetica,sans-serif; line-height:1.2; }
.npe-txt-inner { display:inline-block; transform-origin:0 0; color:#e11d48; }
.npe-txt-inner.black { color:#111827; } .npe-txt-inner.white { color:#fff; text-shadow:0 0 2px #000; } .npe-txt-inner.yellow { color:#fbbf24; text-shadow:0 0 2px #000; }
.npe-txt textarea { background:rgba(255,255,255,.85); border:1px dashed #e11d48; color:inherit; font:inherit; line-height:1.2; padding:0 2px; resize:none; overflow:hidden; min-width:20px; }
.npe-txt-tools { position:absolute; top:-24px; left:0; display:flex; gap:2px; }
.npe-txt-tools button { background:#0f172a; color:#fff; border:1px solid #475569; border-radius:4px; font-size:11px; width:20px; height:20px; cursor:pointer; padding:0; line-height:1; }
.npe-cropov { position:absolute; background:rgba(2,6,23,.62); pointer-events:none; }
.npe-cropov-top { top:0; left:0; right:0; height:0; }
.npe-cropov-bottom { bottom:0; left:0; right:0; height:0; }
.npe-cropov-left { top:0; bottom:0; left:0; width:0; }
.npe-cropov-right { top:0; bottom:0; right:0; width:0; }
.npe-hint { font-size:10.5px; color:#94a3b8; margin-top:8px; line-height:1.45; }